تتيح لك تأثيرات الانتقال في CSS تغيير قيم الخصائص بسلاسة، على مدى زمني محدد.
في هذا الفصل، ستتعلم عن الخصائص التالية:
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
دعم المتصفحات للانتقالات
تشير الأرقام في الجدول إلى إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| خاصية | Internet Explorer | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
كيفية استخدام تأثيرات انتقال CSS
لإنشاء تأثير انتقال، يجب تحديد أمرين:
- خاصية CSS التي تريد إضافة تأثير إليها
- مدة التأثير
ملحوظة: إذا لم يتم تحديد جزء المدة، فلن يكون للانتقال أي تأثير، لأن القيمة الافتراضية هي 0.
يوضح المثال التالي عنصر <div> أحمر بحجم 100px * 100px. كما يحتوي عنصر <div> على تأثير انتقال محدد لخاصية العرض (width)، مع مدة 2 ثانية:
مثال:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
سيبدأ تأثير الانتقال عندما يتغير قيمة خاصية CSS المحددة (العرض).
الآن، دعونا تحديد قيمة جديدة لخاصية العرض (width) عندما يمر المستخدم بالماوس فوق عنصر <div>:
مثال:
div:hover {
width: 300px;
}
سترى أنه عند تحريك المؤشر خارج العنصر، سيعود تدريجيًا إلى النمط الأصلي.
تغيير قيم عدة خصائص
يضيف المثال التالي تأثير انتقال لكل من خاصيتي العرض (width) والارتفاع (height)، مع مدة 2 ثانية للعرض و4 ثوان للارتفاع:
مثال:
div {
transition: width 2s, height 4s;
}
تحديد منحنى سرعة الانتقال
تحدد خاصية transition-timing-function منحنى سرعة تأثير الانتقال.
يمكن أن تأخذ خاصية transition-timing-function القيم التالية:
- ease – يحدد تأثير انتقال بدايته بطيئة، ثم سريعة، ثم ينتهي ببطء (هذه هي القيمة الافتراضية)
- linear – يحدد تأثير انتقال بنفس السرعة من البداية إلى النهاية
- ease-in – يحدد تأثير انتقال بدايته بطيئة
- ease-out – يحدد تأثير انتقال نهايته بطيئة
- ease-in-out – يحدد تأثير انتقال بدايته ونهايته بطيئتين
- cubic-bezier(n,n,n,n) – يتيح لك تعريف قيمك الخاصة في دالة cubic-bezier
يوضح المثال التالي بعضًا من منحنيات السرعة المختلفة التي يمكن استخدامها:
مثال:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
أو باستخدام انتقال الخاصية المختصرة:
div {
transition: width 2s linear 1s;
}
