انتقالات CSS

انتقالات CSS

يتيح لك تحويل CSS تغيير قيمة الخاصية بشكل سلس خلال فترة زمنية معينة.

تحرك المؤشر إلى هذا العنصر لرؤية تأثير التحويل CSS:

CSS

في هذا الفصل، ستتعلم ما يلي:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

دعم المتصفحات للتحويل

الأرقام في الجدول تشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.

خصائص كروم IE فايرفوكس سفاري أوبرا
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> العنصر أيضًا يحتوي على تأثير تحويل على الخاصية عرض، ويستمر لمدة 2 ثانية:

مثال

div {
  عرض: 100px;
  طول: 100px;
  خلفية: أحمر;
  تحويل: عرض 2 ثانية;
}

عند تغيير قيمة الخاصية CSS (عرض)، سيبدأ تأثير التحويل.

الآن، دعنا نحدد قيمة جديدة لخصائص عرض (width) عند وضع المؤشر فوق عنصر <div>.

مثال

div:hover {
  عرض: 300px;
}

جرب بنفسك

الرجاء الانتباه، عند انتقال المؤشر بعيدًا عن العنصر، سيعود إلى نمطه الأصلي بشكل تدريجي.

تغيير قيم عدة خصائص

في المثال التالي، يتم إضافة تأثير التحويل إلى خصائص width و height، width هي 2 ثانية، height هي 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) - يسمح لك بتحديد قيمك الخاصة في وظيفة الثلاثي البيزيرو

في المثال التالي، يتم عرض بعض السرعات المختلفة التي يمكن استخدامها:

مثال

#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;}

جرب بنفسك

تأخير تأثير التحويل

transition-delay تحدد الخاصية تأخير تأثير التحويل (بالدقائق).

في المثال التالي، هناك تأخير مقداره 1 ثانية قبل بدء التحويل:

مثال

div {
  transition-delay: 1s;
}

جرب بنفسك

تحويل + تحويل

في المثال التالي، يتم إضافة تأثير التحويل:

مثال

div {
  transition: width 2s, height 2s, transform 2s;
}

جرب بنفسك

مزيد من أمثلة التحويل

يمكنك تحديد خصائص التحويل CSS بشكل فردي، كما هو موضح أدناه:

مثال

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

جرب بنفسك

أو استخدم اختصاراً transition خصائص:

مثال

div {
  transition: width 2s linear 1s;
}

جرب بنفسك

خصائص التحويل CSS

في الجدول أدناه تم إدراج جميع خصائص التحويل CSS:

خصائص وصف
transition خصائص مختصرة تستخدم لتعيين أربعة خصائص انتقال كخصيصة واحدة.
transition-delay تحديد تأخير عملية الانتقال بالثواني.
transition-duration تحديد المدة التي يجب أن تستمر فيها عملية الانتقال بالثواني أو الميليسي ثانية.
transition-property تحديد اسم الخاصية الخاصة بـ CSS التي يتم تطبيق تأثير الانتقال عليها.
transition-timing-function تحديد مسار سرعة تأثير الانتقال.