خصائص transition CSS

التعريف والاستخدام

خاصية التحويل هي خاصية مختصرة تستخدم لتعيين أربعة خصائص تحويل:

ملاحظة:دائمًا ما يجب تعيين transition-duration إذا لم يتم تعيين الخاصية، فإن المدة تكون 0 و لن يحدث تأثير تحويل.

انظر أيضًا:

دليل CSS:过渡 CSS

دليل HTML DOM:خاصية التحويل

مثال

ضع المؤشر الفارغ على عنصر div، حيث يتم تحويل عرضه من 100px إلى 300px تدريجيًا:

div {
  width: 100px;
  transition: width 2s;
}

جرب بنفسك

قواعد CSS

transition: الخاصية المدة مسار السرعة التأخير;

قيمة الخاصية

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

تفاصيل التقنية

القيمة الافتراضية: all 0 ease 0
الوراثة: no
الإصدار: CSS3
قواعد JavaScript: object.style.transition="width 2s"

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

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم هذه الخاصية تمامًا.

الرقم الذي يحتوي على -webkit-،-moz- أو -o- يشير إلى إصدار الأولي الذي يستخدم التقدم.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-