**animation-delay:** تأخير بداية الأنيميشن. قيم سالبة تبدأ من منتصف الحلقة.
**animation-iteration-count:** عدد التكرارات: - رقم: 1, 2, 3... - `infinite` — لانهائي
**animation-direction:** اتجاه حلقات الأنيميشن: - `normal` — من from إلى to (الافتراضي) - `reverse` — من to إلى from - `alternate` — طبيعي ثم عكسي ثم طبيعي... - `alternate-reverse` — عكسي ثم طبيعي...
**animation-fill-mode:** ما يحدث للعنصر خارج الأنيميشن: - `none` — يعود لحالته الأصلية - `forwards` — يبقى في حالة نهاية الأنيميشن - `backwards` — يأخذ حالة البداية قبل البدء (خلال delay) - `both` — forwards + backwards معاً
**animation-play-state:** `running` أو `paused`
**إيقاف عند hover:** `.element:hover { animation-play-state: paused; }`
| 1 | /* أنيميشن احترافي */ |
| 2 | .animated-item { |
| 3 | animation: |
| 4 | slideIn 0.5s ease-out both, |
| 5 | pulse 3s ease-in-out 0.5s infinite alternate; |
| 6 | } |
| 7 | |
| 8 | /* تأخير تدريجي للعناصر */ |
| 9 | .item:nth-child(1) { animation-delay: 0s; } |
| 10 | .item:nth-child(2) { animation-delay: 0.1s; } |
| 11 | .item:nth-child(3) { animation-delay: 0.2s; } |
مثال 1: قائمة تظهر بتسلسل
| 1 | @keyframes slideIn { |
| 2 | from { opacity: 0; transform: translateX(-20px); } |
| 3 | to { opacity: 1; transform: translateX(0); } |
| 4 | } |
| 5 | |
| 6 | .menu-item { |
| 7 | animation: slideIn 0.4s ease-out both; |
| 8 | } |
| 9 | |
| 10 | .menu-item:nth-child(1) { animation-delay: 0.0s; } |
| 11 | .menu-item:nth-child(2) { animation-delay: 0.08s; } |
| 12 | .menu-item:nth-child(3) { animation-delay: 0.16s; } |
| 13 | .menu-item:nth-child(4) { animation-delay: 0.24s; } |
| 14 | .menu-item:nth-child(5) { animation-delay: 0.32s; } |
| 15 | |
| 16 | /* إيقاف عند hover */ |
| 17 | .animated-icon:hover { animation-play-state: paused; } |
| 18 | |
| 19 | /* مراعاة المستخدمين الحساسين للحركة */ |
| 20 | @media (prefers-reduced-motion: reduce) { |
| 21 | .menu-item { animation: none; } |
| 22 | } |