الفرق بين المراجعتين ل"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> تعني عدم تطبيق الحركة. |
=== البنية الرسمية === | === البنية الرسمية === |
مراجعة 09:36، 30 يوليو 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>#;
مصادر ومواصفات
- مسودة CSS Animations.