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 может использоваться для создания различных динамических и интерактивных эффектов на веб-страницах и веб-приложениях, таких как загрузки, меню, переходы и интерактивные элементы управления.
