مولّد حركات CSS (keyframes)

اختر قالب حركة واضبط المدة والإيقاع والتكرار وشاهد النتيجة مباشرة ثم انسخ كود @keyframes كاملًا. معالجة محلية 100% — لا يُرسل أي شيء إلى خادم.

مثال:

الحركة

المدة (ثانية)

منحنى الإيقاع

التأخير (ثانية)

التكرار

كود CSS

@keyframes fade-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.mon-element {
  animation: fade-animation 1.2s ease-in-out 0s infinite;
}

كيف يعمل

تصف قاعدة @keyframes حالة عنصر عند نسب مئوية مختلفة من مدة الحركة، بينما تربط خاصية animation هذا التسلسل بعنصر مع مدة وإيقاع وعدد مرات تكرار. اختر قالبًا جاهزًا (تلاشٍ، ارتداد، دوران...)، واضبط المعاملات واسترجع الكود النهائي مع قاعدة @keyframes وخاصية animation.

كيف أطبّق هذه الحركة على العنصر الخاص بي؟

انسخ قاعدة @keyframes كما هي في ورقة الأنماط، ثم استبدل المحدد .mon-element بفئة أو معرّف عنصر HTML الذي تريد تحريكه.

أي منحنى إيقاع تختار؟

ease-in-out مناسب لمعظم حركات الواجهة لأنه يبدأ وينتهي بنعومة؛ linear أكثر ملاءمة للدوران المستمر (مثل مؤشر التحميل)، بينما يعطي ease-out تأثير وصول واضح يُستخدم غالبًا لظهور العناصر.

يتم توليد الكود ومعاينته بالكامل في متصفحك دون الاتصال بأي خادم.