@keyframes

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.

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

Синтаксис

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

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

Значения

<custom-ident>: Имя, определяющее список ключевых кадров. Оно должно соответствовать синтаксису идентификатора в CSS.
from: Начальный смещение 0%.
to: Конечное смещение 100%.
<percentage>: Процентное значение времени в последовательности анимации, в котором должен произойти указанный ключевой кадр.
<timeline-range-name> <percentage>: Процентное значение времени в указанном animation-range, в котором должен произойти указанный ключевой кадр. Подробнее о видах анимаций, использующих именованные временные диапазоны, см. в разделе CSS-анимации, управляемые прокруткой.

Описание

Для использования ключевых кадров создайте правило @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.

Каскадирование ключевых кадров поддерживается начиная с Firefox 14.

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

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

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

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

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

@keyframes = 
  @keyframes <keyframes-name> { <qualified-rule-list> }  

<keyframes-name> = 
  <custom-ident>  |
  <string>

Примеры

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

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

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

Спецификация
CSS-анимации уровень 1 # ключевые кадры

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`@keyframes`	431	12	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	94	4.01.0	434.4
`ignore_important_declarations`	45	79	19	32	10.1	45	19	32	10.3	5.0	45
`named_range_keyframes`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes