خصوصیت animation-direction
مثال (خصوصیت animation-direction)
یکبار انیمیشن اجرا می شود و سپس بصورت وارونه یا عکس اجرا می شود:
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari and Chrome */
خودتان امتحان کنید »-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)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 8345
