الفرق بين المراجعتين لصفحة: «CSS/animation-direction»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-direction</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>animation-direction</code>}}</noinclude> | ||
الخاصية <code>animation-direction</code> في CSS تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما. | الخاصية <code>animation-direction</code> في CSS تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 35: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/> <syntaxhighlight lang="css"> | |||
/* قيمة واحدة */ | |||
animation-direction: normal; | |||
animation-direction: reverse; | |||
animation-direction: alternate; | |||
animation-direction: alternate-reverse; | |||
/* عدِّة قيم */ | |||
animation-direction: normal, reverse; | |||
animation-direction: alternate, reverse, normal; | |||
/* القيم العامة */ | |||
animation-direction: inherit; | |||
animation-direction: initial; | |||
animation-direction: unset; | |||
</syntaxhighlight> | |||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 59: | سطر 61: | ||
تقبل الخاصية <code>animation-direction</code> قيمةً واحدةً أو أكثر. | تقبل الخاصية <code>animation-direction</code> قيمةً واحدةً أو أكثر. | ||
=== | === <code>normal</code> === | ||
ستتكرر الحركة إلى الأمام في كل دورة، وهذا يعني أنَّ الحركة ستعاد إلى البداية عند نهاية كل دورة ومن ثم ستبدأ مجددًا. | ستتكرر الحركة إلى الأمام في كل دورة، وهذا يعني أنَّ الحركة ستعاد إلى البداية عند نهاية كل دورة ومن ثم ستبدأ مجددًا. | ||
=== | === <code>reverse</code> === | ||
ستتكرر الحركة إلى الخلف في كل دورة، وهذا يعني أنَّ الحركة ستعاد إلى النهاية عند بداية كل دورة ومن ثم ستبدأ مجددًا. | ستتكرر الحركة إلى الخلف في كل دورة، وهذا يعني أنَّ الحركة ستعاد إلى النهاية عند بداية كل دورة ومن ثم ستبدأ مجددًا. | ||
لاحظ أنَّ مراحل الحركة ستُقلَب أيضًا، وكذلك الأمر لدوال التوقيت، فمثلًا دالة التوقيت <code>ease-in</code> ستصبح <code>ease-out</code>. | لاحظ أنَّ مراحل الحركة ستُقلَب أيضًا، وكذلك الأمر لدوال التوقيت، فمثلًا دالة التوقيت <code>ease-in</code> ستصبح <code>ease-out</code>. | ||
=== | === <code>alternate</code> === | ||
سيُعكَس اتجاه الحركة في كل دورة، وسيكون اتجاه أوّل دورة إلى الأمام. | سيُعكَس اتجاه الحركة في كل دورة، وسيكون اتجاه أوّل دورة إلى الأمام. | ||
=== | === <code>alternate-reverse</code> === | ||
سيُعكَس اتجاه الحركة في كل دورة، وسيكون اتجاه أوّل دورة إلى الخلف. | سيُعكَس اتجاه الحركة في كل دورة، وسيكون اتجاه أوّل دورة إلى الخلف. | ||
| سطر 81: | سطر 83: | ||
</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-fill-mode|animation-fill-mode]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-animations/#animation-direction CSS Animations]. | * مسودة [https://drafts.csswg.org/css-animations/#animation-direction CSS Animations]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Animations]] | [[تصنيف:CSS Animations|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:33، 12 أغسطس 2018
الخاصية animation-direction في CSS تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما.
بطاقة الخاصية
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* قيمة واحدة */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* عدِّة قيم */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* القيم العامة */
animation-direction: inherit;
animation-direction: initial;
animation-direction: 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-direction قيمةً واحدةً أو أكثر.
normal
ستتكرر الحركة إلى الأمام في كل دورة، وهذا يعني أنَّ الحركة ستعاد إلى البداية عند نهاية كل دورة ومن ثم ستبدأ مجددًا.
reverse
ستتكرر الحركة إلى الخلف في كل دورة، وهذا يعني أنَّ الحركة ستعاد إلى النهاية عند بداية كل دورة ومن ثم ستبدأ مجددًا.
لاحظ أنَّ مراحل الحركة ستُقلَب أيضًا، وكذلك الأمر لدوال التوقيت، فمثلًا دالة التوقيت ease-in ستصبح ease-out.
alternate
سيُعكَس اتجاه الحركة في كل دورة، وسيكون اتجاه أوّل دورة إلى الأمام.
alternate-reverse
سيُعكَس اتجاه الحركة في كل دورة، وسيكون اتجاه أوّل دورة إلى الخلف.
البنية الرسمية
animation-direction: <single-animation-direction>#;
حيث:
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-durationوanimation-timing-functionوanimation-delayوanimation-iteration-countوanimation-fill-modeوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.