**@keyframes** تُعرِّف مراحل الحركة. كل نقطة توقف (keyframe) تُحدد قيم CSS عند نسبة زمنية معينة.
```css @keyframes اسم-الحركة { from { /* = 0% */ } to { /* = 100% */ } 50% { /* منتصف الحركة */ } } ```
**خصائص animation:**
**animation-name:** اسم الـ @keyframes.
**animation-duration:** مدة حلقة واحدة.
**animation-timing-function:** نفس قيم transition.
**اختصار animation:** `animation: name duration timing-function delay iteration-count direction fill-mode play-state;`
| 1 | @keyframes fadeIn { |
| 2 | from { opacity: 0; transform: translateY(20px); } |
| 3 | to { opacity: 1; transform: translateY(0); } |
| 4 | } |
| 5 | |
| 6 | .hero-text { |
| 7 | animation: fadeIn 0.6s ease-out forwards; |
| 8 | } |
مثال 1: مكتبة @keyframes شائعة
| 1 | /* Fade In */ |
| 2 | @keyframes fadeIn { |
| 3 | from { opacity: 0; } |
| 4 | to { opacity: 1; } |
| 5 | } |
| 6 | |
| 7 | /* Slide Up */ |
| 8 | @keyframes slideUp { |
| 9 | from { opacity: 0; transform: translateY(24px); } |
| 10 | to { opacity: 1; transform: translateY(0); } |
| 11 | } |
| 12 | |
| 13 | /* Pulse */ |
| 14 | @keyframes pulse { |
| 15 | 0%, 100% { transform: scale(1); } |
| 16 | 50% { transform: scale(1.05); } |
| 17 | } |
| 18 | |
| 19 | /* Spin */ |
| 20 | @keyframes spin { |
| 21 | from { transform: rotate(0deg); } |
| 22 | to { transform: rotate(360deg); } |
| 23 | } |
| 24 | |
| 25 | /* Bounce */ |
| 26 | @keyframes bounce { |
| 27 | 0%, 100% { transform: translateY(0); } |
| 28 | 50% { transform: translateY(-20px); } |
| 29 | } |
| 30 | |
| 31 | /* شاشة تحميل */ |
| 32 | .spinner { animation: spin 1s linear infinite; } |
| 33 | .notification-dot { animation: pulse 2s ease-in-out infinite; } |