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

تحدد خاصية transition-timing-function CSS سرعة تأثير التحويل.

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

قواعد النحو لاستخدام خاصية transition-timing-function

قواعد النحو لهذه الخاصية هي:

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

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

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

قيمة الخاصية

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

مستوى التطابق للمتصفح

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

قراءة المزيد

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

الخصائص ذات الصلة:transition،transition-delay،transition-property،transition-duration。