CSS-анимации позволяют изменять значение свойства элемента по определенному периоду времени. Это может быть изменение цвета фона, позиции, размера, прозрачности, поворота, перемещения и т.д.
Для создания анимаций используются ключевые кадры (@keyframes), где определяются переходы состояний элемента. Ключевые кадры объявляют начальное и конечное состояние элемента, а CSS применяет промежуточные значения между ними на протяжении анимации.
Для применения созданной анимации используется свойство animation у элемента, которому нужно применить анимацию, и определяются параметры анимации: время ее выполнения, задержка запуска, количество повторений и направление анимации.
Например, следующий код анимирует размер шрифта заголовка h1:
/* Определение ключевых кадров */
@keyframes title {
from {
font-size: 20px;
}
to {
font-size: 40px;
}
}
/* Применение анимации к заголовку h1 */
h1 {
animation-name: title;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}Этот код создаст анимацию, которая медленно увеличивает размер шрифта заголовка h1 от 20px до 40px и обратно, поочередно, пока страница не будет закрыта. Он также содержит другие параметры анимации, такие как задержка, продолжительность, направление и количество повторений.
CSS-анимации позволяют создавать интересные и динамичные эффекты, которые улучшают визуальное впечатление от веб-страницы.
