الفرق بين المراجعتين لصفحة: «CSS/animation-duration»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 2: | سطر 2: | ||
الخاصية <code>animation-duration</code> في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة. | الخاصية <code>animation-duration</code> في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css"> | |||
/* حركة واحدة */ | |||
animation-duration: 6s; | |||
animation-duration: 120ms; | |||
/* عدِّة حركات */ | |||
animation-duration: 1.64s, 15.22s; | |||
animation-duration: 10s, 35s, 230ms; | |||
/* القيم العامة */ | |||
animation-name: initial | |||
animation-name: inherit | |||
animation-name: unset | |||
</syntaxhighlight> | |||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 57: | سطر 59: | ||
تقبل الخاصية <code>animation-duration</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من حركة. | تقبل الخاصية <code>animation-duration</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من حركة. | ||
=== | === <code>[[CSS/time|<nowiki><time></nowiki>]]</code> === | ||
الزمن الذي تستغرقه دورة كاملة من الحركة لكي تتم، ويمكن تحديده بالثواني (<code>s</code>) أو بالملي ثانية (<code>ms</code>)، ويجب أن تكون القيمة موجبةً أو صفر (وإذا كانت صفر فيجب توفير الواحدة أيضًا). | الزمن الذي تستغرقه دورة كاملة من الحركة لكي تتم، ويمكن تحديده بالثواني (<code>s</code>) أو بالملي ثانية (<code>ms</code>)، ويجب أن تكون القيمة موجبةً أو صفر (وإذا كانت صفر فيجب توفير الواحدة أيضًا). <code>0s</code> تعني عدم تطبيق الحركة. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 65: | سطر 67: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/animation|animation]]</code> والخاصيات الفرعية التي تضبطها هذه الخاصية وهي <code>[[CSS/animation-name|animation-name]]</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> و<code>[[CSS/animation-play-state|animation-play-state]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
المراجعة الحالية بتاريخ 08:32، 12 أغسطس 2018
الخاصية animation-duration في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة.
بطاقة الخاصية
| القيمة الابتدائية | 0s
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* حركة واحدة */
animation-duration: 6s;
animation-duration: 120ms;
/* عدِّة حركات */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
/* القيم العامة */
animation-name: initial
animation-name: inherit
animation-name: 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-duration قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من حركة.
<time>
الزمن الذي تستغرقه دورة كاملة من الحركة لكي تتم، ويمكن تحديده بالثواني (s) أو بالملي ثانية (ms)، ويجب أن تكون القيمة موجبةً أو صفر (وإذا كانت صفر فيجب توفير الواحدة أيضًا). 0s تعني عدم تطبيق الحركة.
البنية الرسمية
animation-duration: <time>#;
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-timing-functionوanimation-delayوanimation-iteration-countوanimation-directionوanimation-fill-modeوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.