خاصية animation
آخر تحديث: 2026-09-13
animation خاصية animation
الخاصية animation هي اختصار لـ animation-name و animation-duration و animation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode و animation-play-state. وبالاقتران مع @keyframes، تُعرّف تسلسلات رسوم متحركة متعددة المراحل وقابلة للتكرار والإيقاف المؤقت. وعلى عكس transition، تُشغَّل animation تلقائيًا دون محفّز، ما يجعلها مثالية لأدوات التحميل والعروض الدوّارة والتأثيرات النابضة وغيرها من العناصر البصرية المستمرة.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
animation: [ none | <single-animation> ]#;
/* <single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] */⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<single-animation># | القيمة | اختصار الرسم المتحرك: الاسم والمدة ودالة التوقيت والتأخير وعدد التكرارات والاتجاه ووضع التعبئة وحالة التشغيل |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： ترتيب القيم غير مهم، لكن أول قيمة تُفسَّر كوقت هي المدة والثانية هي التأخير. وتجنّب تسمية keyframe تتعارض مع كلمة محجوزة.
مهم： إذا لم يتضمن اختصار animation اسمًا (animation-name)، فإن الإعلان بالكامل غير صالح. يُوصى عمومًا بإدراج الاسم داخل الاختصار لضمان تشغيل الرسم المتحرك فعلًا.
❓ الأسئلة الشائعة
Qهل يمكن إيقاف الرسم المتحرك CSS مؤقتًا في المنتصف ثم استئنافه؟
Aنعم. اضبط animation-play-state: paused للإيقاف المؤقت و running للاستئناف. وأكثر الأنماط شيوعًا هو اقترانه بـ :hover ليتوقف الرسم مؤقتًا أثناء وجود المؤشر فوق العنصر. أثناء الإيقاف، يبقى الرسم عند الإطار الحالي، وعند الاستئناف يكمل من حيث توقف تمامًا.
Qكيف أجعل الرسم المتحرك يُشغَّل مرة واحدة ويتوقف عند الإطار الأخير؟
Aاستخدم animation-fill-mode: forwards الذي يُبقي العنصر عند إطاره المفتاحي الأخير بعد انتهاء الرسم المتحرك، واضبط animation-iteration-count على 1. وإذا أردت أيضًا أن يحتفظ العنصر بحالته الابتدائية قبل بدء الرسم، فاستخدم animation-fill-mode: both. هذه هي الطريقة القياسية لتشغيل رسم متحرك للظهور أو الكشف لمرة واحدة.
Qفي اختصار animation، أي وقت هو المدة وأي وقت هو التأخير؟
Aأول قيمة تُفسَّر كوقت هي المدة والثانية هي التأخير. في animation: bounce 1.5s 0.5s ease، تكون 1.5s مدة التشغيل ويبدأ الرسم بعد تأخير 0.5s. وعند إعطاء وقت واحد فقط، فهو المدة والتأخير يكون 0s افتراضيًا. والخلط بين الزمنين هو الخطأ الأكثر شيوعًا في الاختصار.
Qرسمي المتحرك متقطع ويسقط إطارات. كيف أجعله أكثر سلاسة؟
Aحرّك transform و opacity فقط، وتجنّب تحريك width و height و filter أو خصائص أخرى تُجبر المتصفح على إعادة التدفق وإعادة الرسم في كل إطار. أضف will-change إلى العنصر المتحرك لإنشاء طبقة تركيب مسبقًا، واستخدم التموضع المطلق لإخراجه من تدفق المستند. والتأخير السلبي animation-delay يتخطى البداية ويقفز مباشرة إلى المنتصف.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
