خاصية `transition` في CSS تُستخدم لإضافة تأثيرات انتقالية سلسة بين حالتين مختلفتين لعنصر ما. بدلاً من أن تتغير خصائص العنصر بشكل فوري، تُتيح لك `transition` تحديد مدة زمنية لحدوث التغيير، مما يُضفي على الموقع مظهرًا أكثر احترافية وجاذبية.
**كيف تعمل `transition`؟**
تُحدد `transition` كيفية انتقال قيمة خاصية CSS من قيمة إلى أخرى على مدى فترة زمنية مُحددة. على سبيل المثال، يُمكن استخدامها لتغيير لون خلفية زر عند تمرير مؤشر الفأرة فوقه بانتقال سلس بدلاً من التغيير الفوري.
**خصائص `transition`:**
تُعتبر `transition` خاصية مُختصرة (shorthand property) تجمع أربع خصائص فرعية:
* `transition-property`: تُحدد الخاصية أو الخصائص التي سيتم تطبيق الانتقال عليها.
* `transition-duration`: تُحدد المدة الزمنية للانتقال.
* `transition-timing-function`: تُحدد منحنى التوقيت للانتقال، أي كيفية تغير سرعة الانتقال على مدار المدة الزمنية.
* `transition-delay`: تُحدد التأخير قبل بدء الانتقال.
**شرح الخصائص الفرعية بالتفصيل:**
1. **`transition-property`:**
* تُحدد الخاصية أو الخصائص التي سيتم تطبيق الانتقال عليها.
* القيم المُمكنة:
* اسم خاصية CSS (مثل `background-color`، `opacity`، `transform`، `width`، `height`، إلخ).
* `all`: لتطبيق الانتقال على جميع الخصائص القابلة للانتقال.
* `none`: لا يتم تطبيق أي انتقال.
مثال:
```css
transition-property: background-color, transform; /* الانتقال على لون الخلفية والتحويل */
transition-property: all; /* الانتقال على جميع الخصائص */
```
2. **`transition-duration`:**
* تُحدد المدة الزمنية للانتقال بالثواني (s) أو المللي ثواني (ms).
* القيمة الافتراضية هي `0s` (بدون انتقال).
مثال:
```css
transition-duration: 0.5s; /* نصف ثانية */
transition-duration: 500ms; /* 500 مللي ثانية (نصف ثانية أيضًا) */
```
3. **`transition-timing-function`:**
* تُحدد منحنى التوقيت للانتقال، أي كيفية تغير سرعة الانتقال على مدار المدة الزمنية.
* القيم المُمكنة:
* `ease` (القيمة الافتراضية): يبدأ ببطء، ثم يُسرع، ثم ينتهي ببطء.
* `linear`: سرعة ثابتة طوال مدة الانتقال.
* `ease-in`: يبدأ ببطء.
* `ease-out`: ينتهي ببطء.
* `ease-in-out`: يبدأ وينتهي ببطء.
* `cubic-bezier(n,n,n,n)`: تُتيح لك تحديد منحنى توقيت مُخصص.
مثال:
css
transition-timing-function: ease-in-out;
transition-timing-function: linear;
4. **`transition-delay`:**
* تُحدد التأخير قبل بدء الانتقال بالثواني (s) أو المللي ثواني (ms).
* القيمة الافتراضية هي `0s` (بدون تأخير).
مثال:
```css
transition-delay: 0.2s; /* تأخير 0.2 ثانية قبل بدء الانتقال */
**مثال كامل لاستخدام `transition`:**
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease-in-out, transform 0.3s linear; /* خاصية مختصرة */
}
div:hover {
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
في هذا المثال:
* عند تمرير مؤشر الفأرة فوق المربع، يتغير لون الخلفية إلى الأزرق بانتقال سلس مدته نصف ثانية مع منحنى توقيت `ease-in-out`.
* في نفس الوقت، يدور المربع 180 درجة بانتقال سلس مدته 0.3 ثانية مع سرعة ثابتة (`linear`).
**استخدام `transition` مع `transform`:**
غالبًا ما تُستخدم `transition` مع خاصية `transform` لإنشاء تأثيرات تحويل سلسة، مثل التدوير، التكبير، والتصغير.
**الخاصية المختصرة `transition`:**
يُمكن كتابة جميع خصائص `transition` في سطر واحد باستخدام الخاصية المختصرة:
```css
transition: property duration timing-function delay;
```
مثال:
```css
transition: background-color 0.5s ease-in-out 0.1s;
transition: all 0.3s linear;
```
**متى نستخدم `transition`؟**
* إضافة تفاعلية جذابة لعناصر الموقع.
* تحسين تجربة المستخدم من خلال توفير ملاحظات بصرية سلسة.
* إنشاء تأثيرات بصرية دقيقة.
باختصار، خاصية `transition` تُعتبر أداة قوية لإضافة حركة وانتقالات سلسة لعناصر HTML، مما يُحسن من مظهر وتجربة المستخدم في صفحات الويب.