خصوصیت 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)

لینک های اصلی

مرجع CSS