الفرق بين المراجعتين لصفحة: «CSS/animation-iteration-count»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-iteration-count</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>animation-iteration-count</code>}}</noinclude> | ||
الخاصية <code>animation-iteration-count</code> في CSS تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة. | الخاصية <code>animation-iteration-count</code> في CSS تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/> <syntaxhighlight lang="css"> | |||
/* قيمة واحدة */ | |||
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; | |||
</syntaxhighlight> | |||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 57: | سطر 59: | ||
تقبل الخاصية <code>animation-iteration-count</code> قيمةً واحدةً أو عدِّة قيم كما بيّنا أعلاه. | تقبل الخاصية <code>animation-iteration-count</code> قيمةً واحدةً أو عدِّة قيم كما بيّنا أعلاه. | ||
=== | === <code>infinite</code> === | ||
ستتكرر الحركة إلى اللانهاية. | ستتكرر الحركة إلى اللانهاية. | ||
=== | === <code>[[CSS/number|<number>]]</code> === | ||
رقم يُحدِّد عدد مرات تكرار الحركة، والقيمة الافتراضية هي <code>1</code>، ولا يُسمَح باستخدام الأرقام السالبة، ويمكنك استخدام أرقام غير صحيحة لتشغيل جزء من الحركة (فلو استخدامتَ مثلًا | رقم يُحدِّد عدد مرات تكرار الحركة، والقيمة الافتراضية هي <code>1</code>، ولا يُسمَح باستخدام الأرقام السالبة، ويمكنك استخدام أرقام غير صحيحة لتشغيل جزء من الحركة (فلو استخدامتَ مثلًا <code>0.5</code> فستُشغِّل نصف دورة الحركة فقط). | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 71: | سطر 73: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/animation|animation]]</code> والخاصيات الفرعية التي تضبطها هذه الخاصية وهي<code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-duration|animation-duration]]</code> و <code>[[CSS/animation-timing-function|animation-timing-function]]</code> و <code>[[CSS/animation-delay|animation-delay]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-animations/#animation-iteration-count CSS Animations]. | * مسودة [https://drafts.csswg.org/css-animations/#animation-iteration-count CSS Animations]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Animations]] | [[تصنيف:CSS Animations|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:32، 12 أغسطس 2018
الخاصية animation-iteration-count في CSS تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة.
بطاقة الخاصية
| القيمة الابتدائية | 1
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
من الشائع استخدام الخاصية المختصرة 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;
دعم المتصفحات
| الميزة | 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>
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-durationوanimation-timing-functionوanimation-delayوanimation-directionوanimation-fill-modeوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.