Skip to content

الألوان والتصميم

مولد رسوم CSS المتحركة

Build keyframes visually, copy ready-to-paste CSS.

Runs in your browser

ملاحظة المحرر

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.

شاهد الكل في الألوان والتصميم