خصائص transition-property CSS

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

تحدد خاصية transition-property اسم الخاصية CSS التي يتم تطبيق تأثير التدريجي عليها. (يبدأ تأثير التدريجي عند تغيير الخاصية المحددة).

نصيحة:عادةً، يحدث تأثير التدريجي عندما يوضع مؤشر الفأرة على العنصر.

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

انظر أيضًا:

دليل CSS:过渡 CSS

دليل HTML DOM:transitionProperty خاصية

مثال

ضع مؤشر الفأرة على عنصر div، سيظهر تأثير التدريجي في تغيير عرض العنصر بشكل سلس:

div {
  transition-property: width;
}

تجربة شخصية

CSS syntax

transition-property: none|all|property;

قيمة الخاصية

القيمة الوصف
none لا يوجد خاصية سيحصل عليها تأثير التدريجي.
all جميع الخاصيات ستحصل على تأثير التدريجي.
property قائمة بأسماء CSS الخاصيات التي يتم تطبيق التأثير التدريجي عليها، والمقسمة بالكوما.

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

القيمة الافتراضية: all
التوريث: no
الإصدار: CSS3
جافا سكريبت syntax: object.style.transitionProperty="width,height"

دعم المتصفح

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

الرقم المكتوب مع -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-