ویژگی animation در CSS

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