الخاصية animation-direction

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية 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

 انظر أيضًا

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