**Transitions** تُحوّل التغييرات اللحظية في CSS إلى انتقالات سلسة.
**transition-property:** الخاصية التي تُحرَّك. استخدم `all` بحذر.
**transition-duration:** مدة الانتقال بالثواني (s) أو الميلي ثانية (ms).
**transition-timing-function:** سرعة الانتقال عبر الزمن: - `ease` — بطيء-سريع-بطيء (الافتراضي) - `linear` — سرعة ثابتة - `ease-in` — يبدأ بطيئاً - `ease-out` — ينتهي بطيئاً - `ease-in-out` — بطيء في البداية والنهاية - `cubic-bezier(x1, y1, x2, y2)` — منحنى مخصص
**transition-delay:** تأخير البداية.
**الاختصار:** `transition: property duration timing-function delay;` `transition: all 0.3s ease;`
**انتقالات متعددة:** `transition: color 0.2s ease, background 0.3s ease, transform 0.2s ease;`
| 1 | /* انتقال بسيط */ |
| 2 | .btn { |
| 3 | transition: background-color 0.2s ease, transform 0.15s ease; |
| 4 | } |
| 5 | |
| 6 | /* انتقالات متعددة */ |
| 7 | .card { |
| 8 | transition: |
| 9 | box-shadow 0.3s ease, |
| 10 | transform 0.3s ease; |
| 11 | } |
| 12 | .card:hover { |
| 13 | box-shadow: 0 20px 40px rgba(0,0,0,0.15); |
| 14 | transform: translateY(-4px); |
| 15 | } |
مثال 1: تعريف الانتقالات بشكل احترافي
| 1 | :root { |
| 2 | --duration-fast: 0.1s; |
| 3 | --duration-normal: 0.2s; |
| 4 | --duration-slow: 0.4s; |
| 5 | --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); |
| 6 | --ease-out: cubic-bezier(0, 0, 0.2, 1); |
| 7 | --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce */ |
| 8 | } |
| 9 | |
| 10 | /* تطبيق عملي */ |
| 11 | .interactive { |
| 12 | transition: |
| 13 | transform var(--duration-normal) var(--ease-out), |
| 14 | box-shadow var(--duration-normal) var(--ease-out), |
| 15 | background-color var(--duration-fast) ease; |
| 16 | } |
| 17 | |
| 18 | .interactive:hover { |
| 19 | transform: translateY(-2px); |
| 20 | box-shadow: 0 8px 20px rgba(0,0,0,0.12); |
| 21 | } |