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

أنشئ حركات CSS @keyframes من إعدادات مسبقة أو إطاراتك الرئيسية، واضبط المدة والتأخير والتكرار والاتجاه ووضع التعبئة ومنحنى cubic-bezier.

إعدادات جاهزة

الإطارات المفتاحية

قاعدة واحدة في كل سطر، مثل 50% { transform: scale(1.2); }. عدّل كما تشاء؛ تتحدث المعاينة فورًا.

التوقيت

معاينة

كود CSS
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animated {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

أدوات ذات صلة

عرض الكل
مولّد ظل الصندوق CSS مولّد تدرج CSS مولّد Flexbox CSS مولّد Grid CSS مولّد نصف قطر الحدود مولّد Glassmorphism مولّد Neumorphism مولّد ظل النص CSS

ما هو مولّد حركات CSS؟

يبني حركة CSS كاملة: قاعدة @keyframes والاختصار animation وتجاوزاً اختيارياً لـ prefers-reduced-motion. ابدأ من إعدادات مسبقة مثل الإخفاء والانزلاق والارتداد والنبض والاهتزاز والدوران ونبض القلب، وعدّل الإطارات الرئيسية بحرية وشكّل التوقيت بمنحنى cubic-bezier قابل للسحب.

كيفية استخدام مولّد حركات CSS

  1. اختر إعداداً مسبقاً أو اكتب إطاراتك الرئيسية (قاعدة واحدة في كل سطر).
  2. اضبط اسم الحركة والمدة والتأخير.
  3. اختر الاتجاه ووضع التعبئة والتكرار للأبد أو عدد التكرارات.
  4. اختر دالة التوقيت أو اسحب مقابض cubic-bezier / اكتب X1 وY1 وX2 وY2.
  5. اضغط إعادة التشغيل لمشاهدتها مجدداً ثم انسخ كود CSS.

مثال

الإدخال
Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off
الإخراج
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animated {
  animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
}

متى تستخدم مولّد حركات CSS

استخدمه لتأثيرات الدخول والمحمّلات وإشارات لفت الانتباه والتفاعلات الدقيقة. وفي تغيّرات الحالة البسيطة (لون التمرير أو الحجم) يكفي انتقال CSS. أبقِ خيار الحركة المخفَّضة مفعلاً كي لا يتأثر المستخدمون الذين يطلبون من نظام التشغيل حركة أقل بالتحركات الكبيرة.

كيف يعمل مولّد حركات CSS

يُغلَّف نص الإطارات الرئيسية بـ @keyframes name { … } وتُكتب الإعدادات بترتيب الاختصار القياسي name duration timing-function delay iteration-count direction fill-mode. يقيّد محرر bezier قيم X بين 0 و1 (كما يتطلب CSS) بينما يجوز لقيم Y أن تتجاوز لتسهيل شبيه بالارتداد؛ وعندما تساوي القيم الأربع كلمة CSS مفتاحية (ease أو linear أو ease-in أو ease-out أو ease-in-out) تُكتب الكلمة بدلها. يُنظَّف الاسم ليصبح معرّف CSS صالحاً. تستخدم المعاينة اسم إطارات رئيسية خاصاً كي لا تتعارض مع حركات الصفحة نفسها.

حالات الاستخدام الشائعة

  • حركات دخول بالإخفاء أو الانزلاق
  • مؤشرات دوران ومحمّلات نابضة لا نهائية
  • اهتزاز تنبيهي عند إدخال غير صالح في نموذج
  • مؤشرات تمرير للأسفل ترتد
  • تسهيل مخصص لحركة خاصة بعلامة تجارية

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

ماذا يفعل وضع التعبئة؟

يُبقي forwards آخر إطار رئيسي بعد انتهاء الحركة، ويطبق backwards الإطار الأول أثناء التأخير، ويفعل both الاثنين، ولا يطبق none أياً منهما.

لماذا تقتصر قيم X في bezier على 0–1؟

تمثل X الزمن الذي لا يرجع إلى الوراء، لذا يرفض CSS القيم خارج 0–1. وتمثل Y التقدم ويجوز أن تتجاوز لصنع ترقب أو ارتداد.

ماذا يضيف خيار الحركة المخفضة؟

كتلة @media (prefers-reduced-motion: reduce) تضبط animation: none للمستخدمين الذين فعّلوا الحركة المخفضة في نظام التشغيل.

استكشف المزيد من الفئات

CRC
خوارزميات التحقق من التكرار الدوري لاكتشاف الأخطاء
MD
خوارزميات ملخص الرسالة (MD2، MD4، MD5)
SHA-1
خوارزمية التجزئة الآمنة 1 - دالة تجزئة 160 بت
SHA-2
عائلة خوارزمية التجزئة الآمنة 2 (SHA-224، SHA-256، SHA-384، SHA-512)