ویژگی animation CSS

تعریف و استفاده

animation این یک ویژگی اختصاری است که برای تنظیم شش ویژگی انیمیشن استفاده می‌شود:

توضیحات:همیشه باید animation-duration اگر طولانی‌ترین مدت 0 باشد، هیچ‌گونه انیمیشنی پخش نمی‌شود.

دستورالعمل HTML DOM:animation属性

با استفاده از属性 خلاصه، انیمیشن را به عنصر div متصل کنید:

div
{
animation:mymove 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

مقدار	توضیح
animation-name	تعیین می‌کند که نام keyframe باید به چه انتخابگر بپیوندد.
animation-duration	تعیین می‌کند که انیمیشن در چه مدت زمانی تکمیل می‌شود، به ثانیه یا میلی‌ثانیه.
animation-timing-function	تعیین می‌کند که منحنی سرعت انیمیشن چگونه باید باشد.
animation-delay	تعیین می‌کند که انیمیشن چقدر قبل از شروع باید تأخیر کند.
animation-iteration-count	تعیین می‌کند که انیمیشن چند بار باید پخش شود.
animation-direction	تعیین می‌کند که آیا انیمیشن باید به صورت متناوب در جهت مخالف پخش شود یا خیر.
animation-fill-mode	تعیین می‌کند که آیا مقادیر اضافی باید در خارج از زمان اجرا اعمال شوند یا خیر.
animation-play-state	تعیین می‌کند که آیا انیمیشن در حال اجرا است یا متوقف شده است.

مقدار پیش‌فرض:	none 0 ease 0 1 normal
ارث:	no
نسخه:	CSS3
قوانین جاوااسکریپت:	object.style.animation="mymove 5s infinite"

اعداد شماری با -webkit-، -moz- یا -o- نشان‌دهنده نسخه اولیه‌ای است که استفاده از پیشوند را شروع می‌کند.

Chrome	IE / Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-