@keyframes

Правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров последовательности анимации.

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

  1. Синтаксис
  2. Значения
    1. Действительные списки ключевых кадров
    2. Обработка дубликатов
    3. Когда свойства не заданы в некоторых ключевых кадрах
    4. Когда ключевой кадр определяется несколько раз
    5. !important в ключевых кадрах
  3. Спецификации
  4. Поддержка браузерами

Синтаксис

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  50% {
    margin-left: 50%;
    width: 200%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Значения

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

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

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

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

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

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

Обработка дубликатов

Если для данного имени существует несколько наборов ключевых кадров, используется последний, который встречается парсером. Правила @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% и 100% ключевые кадры.

Когда ключевой кадр определяется несколько раз

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

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

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

Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в 50% ключевом кадре будет добавлено значение left: 20px. Это еще не определено в спецификации, но это обсуждается.

!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;
  }
}

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

Поддержка браузерами

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.