animation
— это свойство CSS, создающее анимационные эффекты на веб-страницах. С помощью animation
можно определить параметры анимации, такие как время длительности, тип и количество повторений.
Синтаксис для применения свойства animation
:
selector {
animation: <animation-name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
}
Значения, используемые в свойстве animation
:
<animation-name>
— имя анимации, которое нужно определить, используя ключевое слово@keyframes
.<duration>
— длительность анимации в секундах или миллисекундах.<timing-function>
— определяет плавность изменения анимации, используя функцию смещения (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier).<delay>
— задержка перед началом анимации.<iteration-count>
— количество повторений анимации (число или ключевое слово infinite).<direction>
— задает, как анимация должна повторяться (normal, alternate, alternate-reverse).<fill-mode>
— установка стилей для начальной и конечной фаз анимации (none, forwards, backwards, both).<play-state>
— определяет, находится ли анимация в работе или стоит (running, paused).
Например, следующий код создает анимацию, которая повторяется бесконечно и вращает элемент:
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.selector {
animation: rotate 2s linear infinite;
}
Это приведет к созданию нового имени анимации rotate
. Он будет повторятся бесконечно и с помощью transform
элемент будет вращаться. Таким образом, анимация начнется в момент подключения стилей и продолжится бесконечно в течение 2 секунд.
Свойство animation
может использоваться для создания различных динамических и интерактивных эффектов на веб-страницах и веб-приложениях, таких как загрузки, меню, переходы и интерактивные элементы управления.