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 پشتیبانی می کنند.