ویژگی Style animation

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

animation این ویژگی شامل شش ویژگی انیمیشن به صورت کوتاه‌نویسی است:

نکته:همیشه تعیین کنید ویژگی animationDuration، در غیر این صورت مدت زمان 0 خواهد بود و هرگز پخش نخواهد شد.

مثال

استفاده از ویژگی کوتاه‌نویسی برای تغییر انیمیشن <div> عناصر:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

آزمایش کنید

نحوه نوشتن

بازگشت ویژگی animation:

object.style.animation

تنظیم ویژگی animation:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

مقدار ویژگی

مقدار توضیح
animationName تعیین می‌کند که نام فریم کلیدی باید به انتخابگر متصل شود.
animationDuration تعیین می‌کند که انیمیشن چقدر زمان می‌برد تا تکمیل شود.
animationTimingFunction تعیین می‌کند که انیمیشن با چه سرعتی اجرا می‌شود.
animationDelay تعیین می‌کند که انیمیشن چقدر زمان می‌برد تا شروع شود.
animationIterationCount تعیین می‌کند که انیمیشن چندین بار پخش شود.
animationDirection تعیین می‌کند که آیا انیمیشن باید در چرخه متقابل به عقب پخش شود یا خیر.
animationFillMode مقدار اعمال شده به انیمیشن خارج از زمان اجرا را تعیین می‌کند.
animationPlayState تعیین می‌کند که آیا انیمیشن در حال اجرا است یا متوقف شده است.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: none 0 ease 0 1 normal none running
مقدار بازگشتی: رشته، که بیانگر ویژگی‌های animation.
نسخه CSS: CSS3

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

animation ویژگی CSS3 (1999) است.

همه مرورگرها به طور کامل از آن حمایت می‌کنند:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی 11

صفحات مرتبط

دستورالعمل‌های CSS3:ویژگی‌های animation