Селекторы ключевых кадров

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

Синтаксис

/* Keywords */
from {
}
to {
}

/* <percentage> values */
0% {
}
50% {
}
100% {
}

/* With <timeline-range-name> */
entry 20% {
}
exit 80% {
}

/* Selector lists */
0%,
50%,
100% {
}
from,
to {
}

Значения

from

Обозначает начало последовательности анимации. Эквивалентно 0%.

to

Обозначает конец последовательности анимации. Эквивалентно 100%.

<percentage>

<percentage> от 0% до 100% включительно, обозначающее общий прогресс последовательности анимации.

<timeline-range-name> <percentage>

<timeline-range-name> перед компонентом <percentage> обозначает конкретную точку прогресса в указанном именованном диапазоне временной шкалы.

Описание

Селектор <keyframe-selector> может быть ключевым словом to или from, процентным значением от 0% до 100% включительно либо разделённым запятыми списком этих ключевых слов и/или процентных значений. Если перед процентным значением указано <timeline-range-name>, оно задаёт диапазон временной шкалы, если временная шкала анимации является временной шкалой прогресса просмотра; в противном случае селектор игнорируется. При использовании разделённого запятыми списка <keyframe-selector> следующий за ним блок стилей применяется ко всем указанным точкам прогресса.

Допустимые значения процентов

Процентные значения должны содержать знак процента (%). Значения без единиц измерения (например, 0 и 20), а также значения за пределами диапазона от 0% до 100% (например, -10% или 110%) недопустимы и приведут к игнорированию блока ключевого кадра.

Каскад, порядок, приоритет и важность

Значения свойств, заданные анимацией @keyframes, важнее всех обычных стилей. Это означает, что независимо от специфичности, анимированное значение переопределит значения, для которых не установлен флаг !important. Приоритет над анимированными значениями свойств имеют только важные значения свойств и значения, которые в данный момент анимируются переходом.

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

Флаг !important недопустим в определении @keyframes.

Пропущенные начальный и конечный селекторы

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

Например, если элемент имеет цвет фона red, и к нему применяется следующая анимация:

@keyframes changeToPurple {
  25%,
  75% {
    background-color: purple;
  }
}

В начале анимации цвет фона будет red, через четверть времени анимации он перейдёт в purple, останется purple на протяжении половины анимации, а затем, начиная с 75% времени временной шкалы анимации, вернётся к red — исходному цвету фона. См. пример, в котором пропущены to и from.

Пропущенные объявления свойств

При создании анимации @keyframes для анимирования нескольких свойств нет необходимости объявлять все свойства во всех блоках селекторов ключевых кадров.

Например, в примере базового использования свойство opacity объявлено во всех блоках селекторов ключевых кадров, но значения transform заданы только для начала и конца. В этом случае элемент будет полностью непрозрачным на протяжении 50% временной шкалы анимации, однако момент, когда элемент будет преобразован 25vw вправо, зависит от animation-timing-function — это произойдёт 50% при использовании linear, но не при использовании ease-in (которое используется в данном случае).

Порядок каскада

Если в нескольких блоках ключевых кадров используется один и тот же <keyframe-selector>, они участвуют в каскаде. Это означает, что если одно и то же свойство определено в нескольких блоках с одним и тем же селектором, приоритет имеет последнее объявление в правиле. Если в них определены разные свойства, они объединяются.

В этой анимации неизменяющиеся значения повторяются в нескольких блоках селекторов, хотя в этом нет необходимости:

@keyframes uglyAnimation {
  0% {
    transform: translateX(0);
    opacity: 0;
    background-color: purple;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
    background-color: purple;
  }
  75% {
    transform: translateX(0);
    opacity: 0;
    background-color: green;
  }
  100% {
    transform: translateX(50vw);
    opacity: 0;
    background-color: purple;
  }
}

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

@keyframes uglyAnimation {
  0%,
  50%,
  75%,
  100% {
    transform: translateX(0);
    opacity: 0;
    background-color: purple;
  }
  50% {
    opacity: 1;
  }
  75% {
    background-color: green;
  }
  100% {
    transform: translateX(50vw);
  }
}

Порядок важен! Нельзя игнорировать каскад. Если неправильно изменить порядок приведённых выше правил, переходы исчезнут. В следующем примере элемент на всё время действия анимации становится фиолетовым и полностью непрозрачным, а все преобразования сбрасываются. Значения свойств применяются и остаются неизменными, поскольку последнее объявление переопределяет объявления из предыдущих блоков селекторов ключевых кадров.

@keyframes makeItPurpleOnly {
  0% {
    background-color: yellow;
  }
  50% {
    opacity: 0;
  }
  75% {
    background-color: green;
  }
  100% {
    transform: translateX(50vw);
  }
  0%,
  50%,
  75%,
  100% {
    transform: translateX(0);
    opacity: 1;
    background-color: purple;
  }
}

С именованными диапазонами временной шкалы

Изначально определённый в модуле CSS-анимаций, модуль анимаций CSS, управляемых прокруткой расширил возможности селектора ключевого кадра, позволив напрямую включать сведения о диапазоне временной шкалы прогресса просмотра в определение анимации @keyframes. Перед компонентом <percentage> селектора можно указать <timeline-range-name>, чтобы привязать ключевые кадры к определённым точкам прогресса в именованном диапазоне временной шкалы. Значение <timeline-range-name> обозначает выбранный предопределённый именованный диапазон временной шкалы, а следующее за ним значение <percentage> — процент прогресса между началом и концом этого именованного диапазона временной шкалы.

@keyframes in-and-out {
  entry 0% {
    opacity: 0;
    transform: translateX(100%);
  }
  entry 100% {
    opacity: 1;
    transform: translateX(0);
  }
  exit 0% {
    opacity: 1;
    transform: translateX(0);
  }
  exit 100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

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

Примеры

Базовое использование

В этом примере показано использование ключевых слов и процентных значений: создаётся анимация ключевых кадров с применением этих типов селекторов ключевых кадров.

HTML

Добавим элемент, который будем анимировать.

<div>I am animated</div>

CSS

Зададим базовые стили для нашего блока:

div {
  background-color: rebeccapurple;
  color: white;
  width: min-content;
  padding: 10px;
  font: 2rem sans-serif;
}

Создадим анимацию @keyframes, задав стили для ключевых слов from и to, а также для промежуточного процентного значения. Будем анимировать свойства opacity и transform.

@keyframes slide-and-fade {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: translateX(50vw);
    opacity: 0;
  }
}

Применим анимацию к элементу с помощью сокращённого свойства animation:

div {
  animation: slide-and-fade 4s ease-in infinite;
}

Результаты

Списки селекторов

Используя тот же HTML-код и базовые стили, что и в предыдущем примере, здесь мы покажем, как с помощью разделённых запятыми селекторов объединять ключевые кадры и применять одинаковые стили в нескольких точках анимации.

<div>I am animated</div>

CSS

Создадим анимацию pulse, которая изменяет размер элемента.

div {
  animation: pulse 4s linear infinite;
}

@keyframes pulse {
  0%,
  75% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  25%,
  100% {
    transform: scale(0.8);
  }
}

div {
  background-color: rebeccapurple;
  color: white;
  width: min-content;
  padding: 10px;
  font: 2rem sans-serif;
}

Результат

Используя список селекторов с несколькими разделёнными запятыми селекторами ключевых кадров, анимация «приостанавливается» на ключевом кадре 25% и продолжается, когда достигает ключевого кадра 75%.

Пропуск to и from

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

HTML

Добавим несколько элементов. Будем анимировать их все.

<div>I am animated</div>
<div>I am animated</div>
<div>I am animated</div>

CSS

Зададим базовые стили для наших элементов, а также разные значения outline-width и background-color для каждого. Будем анимировать эти два свойства.

div {
  background-color: magenta;
  outline: 10px dashed black;
  color: white;
  width: min-content;
  padding: 10px;
  font: 2rem sans-serif;
  margin: 35px auto;

  animation: changes 5s linear infinite;
}
div:first-of-type {
  background-color: blue;
  outline-width: 0;
}
div:last-of-type {
  background-color: green;
  outline-width: 20px;
}

Создадим анимацию, которая задаёт для элемента значения background-color и outline-width в ключевых кадрах 30% и 40%.

@keyframes changes {
  30%, 40% {
    background-color: black;
    outline-width: 15px;
}

Результат

Свойства background-color и outline-width заданы в ключевых кадрах 30% и 40%. В результате значения background-color элементов анимируются от green, magenta и blue до black, а значения outline-width — от 0px, 10px и 20px до 15px. В таком состоянии они остаются в течение одной десятой времени анимации — между 30% и 40% её длительности. По истечении 40% длительности эти свойства снова анимируются до исходных значений.

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

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

См. также

• @keyframes
• animation
• animation-range
• Об именах диапазонов временной шкалы
• Использование CSS-анимаций
• CSS-анимации модуль
• Анимации CSS, управляемые прокруткой