أداة الحركات Animations
جرّب بنفسك
الإعدادات
CSS الناتج
@keyframes ...✅ تم النسخ
ملاحظة: استخدم الحركة بذكاء — مثال: زر عرض خاص/تنبيه/عنصر مهم.
المعاينة
جرّب تغيير النوع والمدة والتكرار
ما هي الحركات (Animations)؟
الحركة في CSS تصنع تسلسلًا من التغيّرات يعمل تلقائيًا — دون حاجة إلى تفاعل المستخدم. بينما ينتقل transition بين حالتين عند حدث، تمرّ الحركة عبر عدّة مراحل (keyframes) وقد تتكرّر إلى ما لا نهاية.
تُبنى الحركة على جزأين: @keyframes يحدّد المراحل (0% كذا، 50% كذا، 100% كذا)، ثم animation يطبّقها على العنصر ويحدّد مدّتها وتكرارها.
🔑 اربطها بشيء تعرفه
الانتقال كقفزة من نقطة إلى نقطة. أمّا الحركة فكفيلم قصير: تحدّد لقطات المفتاح (بداية، وسط، نهاية) ويملأ المتصفّح ما بينها. مثل الرسوم المتحرّكة القديمة: ترسم الإطارات المفتاحية ويُكمَل الباقي.
متى تستخدمها؟
مؤشّرات التحميل (Spinners)
دوران مستمرّ يخبر المستخدم أن شيئًا يحدث.
لفت الانتباه
نبض خفيف على زرّ مهم أو إشعار جديد.
الظهور عند التمرير
انزلاق العناصر إلى مكانها حين تظهر على الشاشة.
التأثيرات الترحيبية
حركة دخول لطيفة لعناصر الصفحة الرئيسية.
خصائص الحركة
| الخاصية | ماذا تفعل؟ | قيم شائعة |
|---|---|---|
| @keyframes | يعرّف مراحل الحركة. | from/to أو 0%..100% |
| animation-name | اسم الـ keyframes المطبّق. | spin / pulse |
| animation-duration | مدّة الدورة الواحدة. | 1s / 2s |
| animation-iteration | عدد التكرار. | infinite / 3 |
| animation-timing | إيقاع الحركة. | ease / linear |
مثال عملي
مؤشّر تحميل دوّار:
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}المراحل بسيطة (من 0 إلى 360 درجة)، وinfinite تجعلها تدور بلا توقّف، وlinear تبقي السرعة ثابتة كمحرّك حقيقي. غيّر 1s إلى 0.5s فيسرع الدوران.
أخطاء شائعة
- 1. الإفراط في الحركة: صفحة كل شيء فيها يتحرّك تُشتّت وتُرهق. الحركة تُوجّه الانتباه، وإن تحرّك كل شيء لم يُوجَّه انتباه لشيء.
- 2. حركات تعمل بلا سبب طوال الوقت: تستهلك المعالج والبطارية. اجعلها هادفة ومحدودة.
- 3. تجاهل من يفضّلون تقليل الحركة: أضِف
@media (prefers-reduced-motion)لإيقاف الحركات لمن يعانون الدوار الحركي — مسألة وصولية مهمّة.
كيف تستفيد من الأداة أعلاه؟
بدّل مدّة الحركة وعدد التكرار ونوع الإيقاع في الأداة أعلاه، وشاهد أثر كلٍّ منها. جرّب الحركات المختلفة (دوران، نبض، اهتزاز) لتفهم كيف تُبنى المراحل.
أسئلة شائعة
animation حين تحتاج حركة تلقائية (بلا تفاعل)، أو متعدّدة المراحل، أو متكرّرة (مؤشّر تحميل، نبض). واستعمل transition للتغيّر البسيط بين حالتين عند حدث (hover). animation-iteration-count: 1 (وهو الافتراضي). استعمل infinite فقط للحركات المستمرّة كمؤشّرات التحميل. transform وopacity سريعة جدًا (يعالجها كرت الشاشة). أمّا تحريك خصائص كالعرض والارتفاع والمواضع فأثقل وقد يسبّب تقطّعًا. الْزَم transform وopacity ما أمكن.