Справочник HTML & CSS

@keyframes

Описывает шаги анимации, которую затем запускают свойством `animation`.

Синтаксис

@keyframes name { from { … } to { … } }

Параметры

Параметр	Тип	Описание
from \| to	keyframe	Начало и конец, то же, что `0%` и `100%`.
%	keyframe	Промежуточные шаги: `50%`; несколько шагов могут делить одно правило: `0%, 100%`.

Примеры

Прыгающий мяч:

<style>
  @keyframes bounce {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -30px; }
  }
  .ball { width: 30px; height: 30px; margin-top: 35px; border-radius: 50%; background: tomato;
    animation: bounce 1s ease-in-out infinite; }
</style>
 
<div class="ball"></div>

Примечания

Если from или to нет, вместо них берутся текущие стили элемента. Имя должно быть уникальным: следующий @keyframes с тем же именем заменяет предыдущий.

См. также

animation — Запускает на элементе анимацию из `@keyframes`.
transition — Плавно анимирует изменение свойства от старого значения к новому.
transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.

Вопросы и ответы по теме

В учебнике

Анимации — Анимации CSS — правило @keyframes, свойство animation, повторы и направление, ключевые кадры в процентах, fill-mode и prefers-reduced-motion.

Спасибо, что читаете!