CSS-директива `@keyframes`

@keyframes CSS-директива управляет промежуточными этапами последовательности CSS-анимации, задавая стили для ключевых кадров (или контрольных точек) вдоль последовательности анимации. Это обеспечивает больший контроль над промежуточными этапами последовательности анимации, чем переходы.

Синтаксис

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

Значения

<keyframes-name>

Чувствительный к регистру <custom-ident> или строка, задающая имя списка ключевых кадров.

from

Эквивалентно значению 0%.

to

Эквивалентно значению 100%.

<percentage>

Процентное положение в последовательности анимации, в котором должен появиться указанный ключевой кадр.

<timeline-range-name> <percentage>

Процентное положение в указанном animation-range, в котором должен появиться указанный ключевой кадр.

Описание

Чтобы использовать ключевые кадры, создайте правило @keyframes с именем, которое затем будет использоваться свойством animation-name для сопоставления анимации с её объявлением ключевых кадров. Каждое правило @keyframes содержит список стилей из селекторов ключевых кадров, указывающих процентные положения в анимации, в которых появляются ключевые кадры, и блок со стилями для этих ключевых кадров.

Процентные значения ключевых кадров можно указывать в любом порядке; они будут обработаны в порядке их появления.

JavaScript может получить доступ к директиве @keyframes через интерфейс объектной модели CSS CSSKeyframesRule.

Допустимые списки ключевых кадров

Если в правиле ключевых кадров не заданы начальное или конечное состояния анимации (то есть 0%/from и 100%/to), браузеры используют существующие стили элемента для начального и конечного состояний. Это можно использовать, чтобы анимировать элемент из исходного состояния и обратно.

Свойства, которые нельзя анимировать в правилах ключевых кадров, игнорируются, но поддерживаемые свойства всё равно будут анимироваться.

Разрешение дубликатов

Если для заданного имени существует несколько наборов ключевых кадров, используется последний набор, встреченный анализатором. Правила @keyframes не каскадируются, поэтому анимации никогда не получают ключевые кадры более чем из одного набора правил.

Если временное смещение анимации указано несколько раз, для этого кадра используются все ключевые кадры правила @keyframes с таким процентным значением. Внутри правила @keyframes действует каскадирование, если несколько ключевых кадров задают одинаковые процентные значения.

Если некоторые свойства отсутствуют в отдельных ключевых кадрах

Свойства, заданные не во всех ключевых кадрах, интерполируются, если это возможно. Свойства, которые нельзя интерполировать, исключаются из анимации. Например:

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

Здесь свойство top анимируется с использованием ключевых кадров 0%, 30% и 100%, а свойство left — с использованием ключевых кадров 0%, 68%, 72% и 100%.

Если ключевой кадр определён несколько раз

Если ключевой кадр определён несколько раз, но не все затронутые свойства указаны в каждом из этих определений, учитываются все заданные в них значения. Например:

@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

В этом примере для ключевого кадра 50% используются значения top: 10px и left: 20px.

!important в ключевом кадре

Объявления в ключевом кадре, помеченные флагом !important, игнорируются.

@keyframes important1 {
  0% {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important; /* ignored */
  }
  100% {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

Формальный синтаксис

Примеры

Примеры CSS-анимации

Примеры см. в разделах Использование CSS-анимаций и Анимации, управляемые прокруткой.

Спецификации

Совместимость с браузерами

См. также

• animation-name
• Использование CSS-анимаций
• Временные шкалы CSS-анимаций, управляемых прокруткой
• Понимание имён диапазонов временной шкалы
• CSS-анимации модуль
• CSS-анимации, управляемые прокруткой модуль
• AnimationEvent
• Анимирование элементов при прокрутке с помощью анимаций, управляемых прокруткой