استخدام خاصية CSS3 animation-delay و مثال

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

الجدول أدناه يلخص استخدام هذه الخاصية و تاريخ إصداراتها.

قواعد استخدام animation-delay

قواعد اللغة الخاصة بهذه الخاصية هي:

animation-delay: time | initial | inherit

الآتي يوضح كيفية استخدام خاصية animation-delay.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　4s;
　　　　-webkit-animation-delay:　2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　4s;
　　　　animation-delay:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

قيمة الخاصية

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

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

توافق المتصفحات للخصائص animation-delay، جميع المتصفحات الرئيسية تدعم هذه الخاصية.

قراءة متعمقة

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

خصائص المرتبطة وقواعدها:animation،animation-name،animation-duration،animation-timing-function،animation-iteration-count،animation-direction،animation-fill-mode،animation-play-state،@keyframes。