الخاصية animation-iteration-count
< CSS
الخاصية animation-iteration-count في CSS تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة.
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* قيمة واحدة */
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;
/* عدِّة قيم */
animation-iteration-count: 2, 0, infinite;
/* القيم العامة */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
| القيمة الابتدائية | 1
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 4.0 (مع السابقة -webkit-)
43.0 |
5.0 (مع السابقة -moz-)
16.0 |
10 | 15.0 (مع السابقة -webkit-)
30.0 |
5.1 (مع السابقة -webkit-)
9.0 |
البنية العامة
تقبل الخاصية animation-iteration-count قيمةً واحدةً أو عدِّة قيم كما بيّنا أعلاه.
القيمة infinite
ستتكرر الحركة إلى اللانهاية.
القيمة <number>
رقم يُحدِّد عدد مرات تكرار الحركة، والقيمة الافتراضية هي 1، ولا يُسمَح باستخدام الأرقام السالبة، ويمكنك استخدام أرقام غير صحيحة لتشغيل جزء من الحركة (فلو استخدامتَ مثلًا القيمة 0.5 فستُشغِّل نصف دورة الحركة فقط).
البنية الرسمية
animation-iteration-count: <single-animation-iteration-count>#;
حيث:
<single-animation-iteration-count> = infinite | <number>
مصادر ومواصفات
- مسودة CSS Animations.