ویژگی animation-name در CSS

animation-name Property

وِیژگی animation-name در CSS می تواند یک یا چند انیمیشن را به عنصر اضافه کند.

نحوه نوشتار

animation-name: none;
animation-name: animation;

animation-name: Anim1, Anim2;
animation-name: none, -moz-specific, spin;

animation-name: keyframename|none;

مقادیر

none​

​کلیدواژه ای که به هیج keyfarme اشاره نمی کند. میتوان از این کلیدواژه برای غیرفعال کردن انیمیشن و تغییر ندادن دیگر مقادیر استفاده کرد.

نام keyframe​

نامی که هویت یک انیمیشن را مشخص می کند. این نام می تواند ترکیبی از حروف کوچک و بزرگ a تا z و شماره های 0 تا 9 و ( _ ) و خط تیره ( – ) باشد. اولین کاراکتر باید بدون خط تیره و از حروف باشد.

در مثال زیر نحوه عملکرد این ویژگی را با استفاده از ترکیب 3 انیمیشن میبینیم:

html

<div class="wrapper">
    <div class="box"></div>
</div>

css

.wrapper {
   margin: 0 auto;
   display: flex;
   max-width: 500px;
   height: 330px;
}
.box {
   width: 50px;
   height: 50px;
   margin: auto;
   position: relative;
   top: 0px;
   animation-name: topBottom,rotate,colors;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
}
@keyframes  topBottom {
   from {
        top: -100px;
   }
    to {
        top: 100px;
     }
}
@keyframes rotate {
   from {
        transform: rotate(0deg)
   }
   to {
        transform: rotate(360deg)
    }
}
@keyframes  colors {
    from {
       background-color: dodgerblue;
    }
    to {
       background-color: orangered;
    }
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.