الفرق بين المراجعتين لصفحة: «CSS/animation-duration»

من موسوعة حسوب
< CSS
لا ملخص تعديل
 
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
سطر 68: سطر 68:
== مصادر ومواصفات ==
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-animations/#animation-duration CSS Animations].  
* مسودة [https://drafts.csswg.org/css-animations/#animation-duration CSS Animations].  
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Animations]]
[[تصنيف:CSS Animations|{{SUBPAGENAME}}]]

مراجعة 15:42، 28 يناير 2018

الخاصية animation-duration في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة.

من الشائع استخدام الخاصية المختصرة 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
القيمة الابتدائية 0s
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.

دعم المتصفحات

الميزة 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>#;

مصادر ومواصفات