animation Property
ویژگی animation
در CSS، مابین استایل های CSS حرکتی پیوسته ایجاد می کند تا اینگونه به نظر برسد که عنصر در حال حرکت و جابجایی است که در اصطلاح به آن انیمیشن گفته می شود.
این ویژگی shorthand (کوتاه نویسی) قادر است مقادیر ویژگی های زیر را مشخص کند:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
نحوه نوشتار
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; animation: name duration timing-function delay iteration-count direction fill-mode play-state;
مقادیر
single-animation-iteration-count
تعداد دفعاتی که انیمیشن اجرا می شود.
single-animation-direction
جهتی که انیمیشن اجرا می شود.
single-animation-fill-mode
مشخص می کند که بعد از اتمام انیمیشن استایل ها چگونه باید اعمال شوند.
single-animation-play-state
مشخص می کند که آیا انیمیشن در حال اجرا است یا نه.
در مثال زیر نحوه عملکرد ویژگی animation
را میبینیم:
html
<div class="sectionQuart"> <span class="loader loaderQuart"></span> </div>
css
* { margin: 0; } html, body { height: 100%; } .sectionQuart { background: violet; height: 100%; display: grid; place-content: center; } .loaderQuart { width: 50px; height: 50px; position: relative; border-radius: 50px; border: 5px solid rgba(255, 255, 255, 0.5); } .loaderQuart:after { content: ""; position: absolute; top: -6px; left: -6px; bottom: -6px; right: -6px; border-radius: 50px; border: 5px solid transparent; border-top-color: #fff; animation: loaderSpin 0.7s linear infinite; } @keyframes loaderSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
یکی از مرسوم ترین نمونه های استفاده از ویژگی animation
در ساخت انیمیشن های بارگذاری است.
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.