الفرق بين المراجعتين ل"CSS/animation-direction"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 84: | سطر 84: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [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}}]] |
مراجعة 15:34، 28 يناير 2018
الخاصية animation-direction في CSS تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما.
من الشائع استخدام الخاصية المختصرة 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;
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
دعم المتصفحات
| الميزة | 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
مصادر ومواصفات
- مسودة CSS Animations.