@keyframes — правило CSS, определяющее ключевые кадры анимации. Оно позволяет создать последовательность состояний элемента в разные моменты времени, которые браузер будет плавно переводить одно в другое, создавая эффект движения. Работает путем определения набора стилей для элемента в определенных процентах времени (от 0% до 100%) или с использованием ключевых слов from (0%) и to (100%).
Для использования keyframes необходимо:
@keyframes с уникальным именем.@keyframes указать стили для различных временных отметок (в процентах или from/to).animation.cssОсновные свойства animation, используемые совместно с @keyframes:
| Свойство | Описание |
|---|---|
animation-name | Имя @keyframes, которое нужно применить. |
animation-duration | Длительность одного цикла анимации (например, 2s, 500ms). |
animation-timing-function | Функция скорости анимации (например, linear, ease, ease-in, cubic-bezier). |
animation-delay | Задержка перед началом анимации (например, 1s). |
animation-iteration-count | Количество повторов анимации (infinite для бесконечного повтора). |
animation-direction | Направление анимации (normal, reverse, alternate, alternate-reverse). |
animation-fill-mode | Определяет, какие стили применяются к элементу до и после выполнения анимации. |
animation-play-state | Определяет, находится ли анимация в состоянии выполнения или на паузе. |