الألوان والتصميم
مولد رسوم CSS المتحركة
Build keyframes visually, copy ready-to-paste CSS.
ملاحظة المحرر
Understanding · Keyframes, timing, and what runs on the GPU.
هذا الفصل المعمّق متاح حاليًا باللغة الإنجليزية فقط. أداة التحويل أعلاه تعمل بلغتك؛ أما المقال التفصيلي الطويل فلم تتم ترجمته بعد.
الأسئلة المتكررة
Quick answers.
›Does the generator use external libraries?
No. It outputs pure CSS keyframes and `animation` properties that work natively in all modern browsers without any dependencies.
›What is the difference between ease-in and ease-out?
The `ease-in` function starts the animation slowly and speeds up at the end, while `ease-out` starts quickly and decelerates at the end.
›Can I animate any CSS property?
The tool focuses on the most common animatable properties like `transform`, `opacity`, and `background-color`. These properties are generally more performant as they avoid triggering browser layout recalculations.
›How do I make an animation loop forever?
Set the `animation-iteration-count` property to `infinite`. This is a standard option in the duration and timing configuration panel.
يبحث الأشخاص أيضًا عن
أدوات ذات صلة
More in this room.
- مولد التدرجاتتدرجات CSS الخطية والشعاعية والمخروطية.
- مولد الظل الصندوقيمحرر box-shadow CSS مرئي.
- مولد نصف قطر الحدودمحرر border-radius CSS لكل زاوية.
- محرر Cubic Bezierصمم منحنيات التسهيل CSS بصرياً.
- مولد فلاتر CSSمعاينة حية للضبابية والسطوع وتدوير الألوان والمزيد.
- مولد Glassmorphismبطاقات واجهة مستخدم زجاجية مثلجة مع backdrop-filter.