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

يحدد خاصية transition-duration في CSS الوقت المطلوب للانتهاء من الحركة العرضية بالثواني أو الميليسي ثانية.

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

قواعد استخدام transition-duration

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

transition-duration:　time　|　initial　|　inherit

المثال أدناه يوضح كيفية استخدام خاصية transition-duration.

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

قيمة الخاصية

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

متوافق مع المتصفحات

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

قراءة إضافية

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

خصائص مرتبطة:transition،transition-delay،transition-property،transition-timing-function。