الفرق بين المراجعتين ل"CSS/animation-duration"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
(مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
سطر 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.