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

المراجعة الحالية بتاريخ 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.

@@ سطر 83: / سطر 83: @@
 </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>.
 == مصادر ومواصفات ==