خصوصیت animation-direction

مثال

یکبار انیمیشن اجرا می شود و سپس بصورت وارونه یا عکس اجرا می شود:

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari and Chrome */

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-direction را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-direction می توانید جهت و نحوه تناوب انیمیشن را تعیین نمایید.

توجه: اگر خصوصیت animation-iteration-count را با مقدار 1 تنظیم کرده باشید (انیمیشن فقط یکبار اجرا می شود) در این صورت اگر خصوصیت animation-direction را با مقدار "alternate" یا "alternate-reverse" تنظیم نمایید، اثری نخواهد داشت.

مقدار پیشفرض normal
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationDirection="alternate"

نحوه استفاده

animation-direction: value;
مقدار توضیحات نمایش دادن
normal انیمیشن بصورت معمولی اجرا می شود. مقدار پیشفرض.
reverse انیمیشن بصورت عکس اجرا می شود یعنی از آخر به اول.
alternate اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، مقدار alternate انیمیشن را به صورت عکس تکرار می کند.
alternate-reverse اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، مقدار alternate-reverse انیمیشن را به صورت عکس تکرار می کند. (نقطه شروع انیمیشن از آخر به اول است)

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)