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

يحدد خاصية CSS3 animation-iteration-count عدد المرات التي يجب على الرسوم المتحركة أن تتم لعبها قبل التوقف.

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

نحو استخدام خاصية animation-iteration-count

تتمثل نحو هذه الخاصية كما يلي:

animation-iteration-count: number | infinite | initial | inherit

في هذا المثال، يتم عرض كيفية استخدام خاصية animation-iteration-count.

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

قيمة الخاصية

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

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

توافق المتصفحات لخصائص animation-iteration-count، جميع المتصفحات الشائعة تدعم هذه الخاصية.

قراءة متعمقة

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

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