خصوصیت animation-name

چاپ

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

اتصال عنصر <div> به قانون keyframes@ با استفاده از نام انیمیشن:

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

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-name را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از خصوصیت animation-name، می توانید قانون keyframes@ را به عنصر مورد نظرتان متصل نمایید.

keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationName="mymove"

نحوه استفاده

animation-name: keyframename|none;
مقدارتوضیحات
keyframename نامی که در قانون keyframes@ تعریف کرده ایم را مشخص می کند.
none مشخص می کند که انیمیشنی وجود ندارد. (می توان از آن برای لغو کردن انیمیشن هایی که بصورت آبشاری اجرا می شوند، استفاده نمود)

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)