طريقة استخدام خاصية transition-delay في CSS3 و مثال

تعريف خاصية transition-delay CSS تحدد متى يبدأ التحرك (على سبيل المثال، قيمة 2s تعني أن التحرك سيبدأ بعد تطبيقه لمدة 2 ثانية). يمكن تحديد القيمة بثانية أو ميليسي ثانية.

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

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

جملة هذه الخاصية تُكتب كما يلي:}}

transition-delay:　time　|　initial　|　inherit

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

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

قيمة الخاصية

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

متوافقية المتصفحات

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

قراءة إضافية

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

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