Анимационные ключевые кадры (@keyframes) в CSS позволяют создавать сложные анимации, определяя стили элемента в разные моменты времени на протяжении анимации.
Они работают путем определения набора правил CSS, которые применяются к элементу в определенные процентные точки (от 0% до 100%) или с использованием ключевых слов from (эквивалентно 0%) и to (эквивалентно 100%). Между этими ключевыми кадрами браузер плавно интерполирует значения свойств CSS для создания эффекта движения.
cssЧтобы применить такую анимацию к элементу, используется свойство animation:
cssОсновные свойства, используемые с @keyframes через свойство animation:
| Свойство | Описание |
|---|---|
animation-name | Имя @keyframes правила, которое нужно применить. |
animation-duration | Продолжительность анимации в секундах (s) или миллисекундах (ms). |
animation-timing-function | Кривая скорости анимации (например, ease, linear, ease-in, ease-out, ease-in-out). |
animation-delay | Задержка перед началом анимации. |
animation-iteration-count | Количество повторений анимации (число или infinite). |
animation-direction | Направление воспроизведения анимации (normal, reverse, alternate, alternate-reverse). |
animation-fill-mode | Как применяются стили анимации до и после ее выполнения (none, forwards, backwards, both). |
animation-play-state | Состояние воспроизведения анимации (running, paused). |