سبد (0)

خصوصیت animation-direction

مثال (خصوصیت animation-direction)

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

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari and Chrome */
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای 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)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه