الفرق بين المراجعتين لصفحة: «CSS/animation-play-state»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-play-state</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>animation-play-state</code>}}</noinclude> | ||
الخاصية <code>animation-play-state</code> في CSS تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها. | الخاصية <code>animation-play-state</code> في CSS تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 30: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* قيمة واحدة */ | |||
animation-play-state: running; | |||
animation-play-state: paused; | |||
/* عدِّة قيم */ | |||
animation-play-state: paused, running, running; | |||
/* القيم العامة */ | |||
animation-play-state: inherit; | |||
animation-play-state: initial; | |||
animation-play-state: unset; | |||
</syntaxhighlight>استئناف الحركات المتوقفة مؤقتًا سيسمح بإكمالها من مكان توقفها، بدلًا من البدء مجددًا من بداية سلسلة الحركات. | |||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 54: | سطر 58: | ||
تقبل الخاصية <code>animation-play-state</code> قيمةً واحدةً أو أكثر. | تقبل الخاصية <code>animation-play-state</code> قيمةً واحدةً أو أكثر. | ||
=== | === <code>running</code> === | ||
الحركة تعمل حاليًا. | الحركة تعمل حاليًا. | ||
=== | === <code>paused</code> === | ||
الحركة متوقفة حاليًا توقفًا مؤقتًا. | الحركة متوقفة حاليًا توقفًا مؤقتًا. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 67: | سطر 71: | ||
</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-iteration-count|animation-iteration-count]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-fill-mode|animation-fill-mode]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-animations/#animation-play-state CSS Animations]. | * مسودة [https://drafts.csswg.org/css-animations/#animation-play-state CSS Animations]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Animations]] | [[تصنيف:CSS Animations|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:31، 12 أغسطس 2018
الخاصية animation-play-state في CSS تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها.
بطاقة الخاصية
| القيمة الابتدائية | running
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* قيمة واحدة */
animation-play-state: running;
animation-play-state: paused;
/* عدِّة قيم */
animation-play-state: paused, running, running;
/* القيم العامة */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: 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-play-state قيمةً واحدةً أو أكثر.
running
الحركة تعمل حاليًا.
paused
الحركة متوقفة حاليًا توقفًا مؤقتًا.
البنية الرسمية
animation-play-state: <single-animation-play-state>#;
حيث:
<single-animation-play-state> = running | paused
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-durationوanimation-timing-functionوanimation-delayوanimation-iteration-countوanimation-directionوanimation-fill-mode.
مصادر ومواصفات
- مسودة CSS Animations.