SUPER EASY UTILS

منشئ حركات CSS

أنشئ حركات CSS بصرياً باستخدام الإطارات المفتاحية.

معاينة

Start
Animate

CSS المُنشأ

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

إعدادات الرسوم المتحركة

2s

الحالة الابتدائية0%

0, 0
1
0°
1
#3b82f6

الحالة النهائية100%

100, 0
1.2
45°
1
#ec4899
التالي
اقرأ الدليل الكامل
أو جرب هذه
مولد الأنماط CSSمولد التدرج CSSمولد فن ASCII

الأدوات الموصى بها

أدوات مختارة بعناية قد تجدها مفيدة

Creating CSS Animations Without Hand-Coding

نظرة عامة

CSS animations bring interfaces to life — fades, slides, bounces, and spins — but writing keyframes by hand is fiddly. This generator lets you configure an animation visually and outputs ready-to-paste CSS, all previewed live in your browser.

كيفية الاستخدام

  1. 1

    Pick an animation type

    Choose fade, slide, bounce, spin, or another preset.

  2. 2

    Adjust timing

    Set duration, easing, delay, and how many times it repeats.

  3. 3

    Copy the CSS

    Paste the generated keyframes and animation rule into your stylesheet.

كيف يعمل

You choose properties like type, duration, timing function, delay, and iteration, and the tool builds the corresponding @keyframes rule and animation shorthand. The timing function (ease, linear, cubic-bezier) shapes how the motion accelerates, while duration and iteration control speed and repetition. You see the effect live and copy the generated CSS into your stylesheet.

متى تستخدمه

Adding a subtle entrance animation to a hero section or card. Creating a loading spinner or pulse effect. Prototyping motion before committing it to code.

الأسئلة الشائعة

It controls the acceleration curve of the motion — ease starts and ends slowly, linear is constant, and cubic-bezier lets you define a custom curve.

منشئ حركات CSS | Super Easy Utils