استخدام خاصية animation-duration في CSS3 مع أمثلة

يحدد خاصية animation-duration الخاصة بـ CSS3 الوقت الذي يستغرقه الرسم المتحرك لإنهاء دورة واحدة (ثانية) أو ميلي ثانية (ms).

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

استخدام نحو animation-duration

جملة هذه الخاصية كما يلي:

animation-duration:　time　|　initial　|　inherit

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

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

قيمة الخاصية

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

مرونة المتصفح

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

قراءة متعمقة

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

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