دليل CSS

قواعد CSS @

موسوعة خصائص CSS

خصائص transition-timing-function في CSS3 خصائص transition-duration في CSS3

استخدام خاصية transition-property في CSS3 و أمثلة

يحدد خاصية transition-property CSS الأسماء للخصائص التي يجب تطبيق تأثير التحرك عليها.

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

القيمة الافتراضية:	all
تطبيقه:	جميع العناصر::before و ::after الرموز المزيفة
الوراثة:	لا يوجد
يمكن تحريكه:	لا.يرجى الرجوع إلى خصائص التحرك.
الإصدار:	ميزات CSS3 الجديدة
قواعد اللغة الجافاسكربت:	عنصر.style.transitionProperty="width,height"

استخدام جملة transition-property

قواعد النص التالية هي لـ

transition-property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is　a　CSS　property　name

في المثال التالي، يتم عرض كيفية استخدام الخاصية transition-property.

مثال

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

اختبار لمعرفة‹/›

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

القيمة	وصف
none	لا يوجد خصائص ستحصل على تأثير التدرج.
all	جميع الخصائص ستحصل على تأثير التدرج. هذا هو القيمة الافتراضية.
initial	ضبط هذه الخاصية إلى قيمتها الافتراضية.
inherit	إذا تم تحديد، فإن العناصر المرتبطة تستخدم نفس قيمة transition-property للاب

تطابق المتصفحات

تطابق المتصفحات الخاصة بخصائص transition-property، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الرئيسية تدعم هذه الخاصية.

	Firefox 4+ ^-moz-،16 + Google Chrome 4+ ^-webkit-،26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-،6.1+ Opera 10.5+ ^-o-،12.1+

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:Transitions CSS3.

خصائص مرتبطة:transition,transition-delay,transition-duration,transition-timing-function.

خصائص transition-timing-function في CSS3 خصائص transition-duration في CSS3