W3docs
ru
Войти

Правило CSS @keyframes

Правило @keyframes задаёт код анимации. Анимация создаётся постепенным изменением одного набора CSS-стилей в другой.

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

Правило @keyframes является ключевой частью спецификации CSS Animations.

За правилом @keyframes и его идентификатором следуют наборы правил (то есть стилевые правила с селекторами и блоками объявлений, как в обычном CSS-коде), заключённые в фигурные скобки.

Ключевые кадры в последовательности анимации

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

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

Блок объявлений ключевого кадра содержит CSS-свойства и их значения. Селектор ключевого кадра может использовать процентное значение (%) или ключевые слова from (эквивалентно 0%) и to (эквивалентно 100%). 0% отмечает начало анимации, а 100% — её конец.

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

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

Вы также можете группировать селекторы, которые имеют одинаковые стили, разделяя их запятыми: 0%, 100% { opacity: 1; }.

Как браузер заполняет пробелы

Вы объявляете стили только в контрольных точках ключевых кадров — браузер интерполирует каждый кадр между ними. Если вы анимируете background-color от зелёного при 0% до синего при 50%, цвета плавно перетекают на этом интервале; вам никогда не нужно самостоятельно указывать промежуточные значения.

Несколько правил управляют этой интерполяцией:

  • Интерполируются только анимируемые свойства. Числовые значения и значения цвета (например, width, opacity, transform и color) анимируются плавно. Свойства вроде display мгновенно переключаются между ключевыми кадрами, а не плавно переходят.
  • Темп задаётся отдельно. Форма кривой интерполяции (linear, ease, ease-in-out и т.д.) задаётся через animation-timing-function, а не через @keyframes.
  • Отсутствующие from/to выводятся автоматически. Если вы опускаете ключевой кадр 0% или 100%, браузер использует текущее вычисленное значение свойства элемента в качестве отсутствующей конечной точки.

Вендорные префиксы

Правило @keyframes полностью поддерживается всеми современными браузерами без необходимости использования вендорных префиксов. Устаревшие префиксы (такие как -webkit- или -moz-) больше не требуются.

Синтаксис

Синтаксис at-правила CSS @keyframes

@keyframes animationname {keyframes-selector {css-styles;}}

Использование @keyframes как ключевого слова

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

Вот как это выглядит:

Как определить анимацию и применить её к элементу

/* define the animation */
@keyframes your-animation-name {
  /* style rules */
}

/* apply it to an element */
.element {
  animation-name: your-animation-name;
  /* OR using the animation shorthand property */
  animation: your-animation-name 1s …;
}

Пример правила @keyframes со свойством background-color:

Пример at-правила CSS @keyframes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 50px;
        animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #cccccc;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>
Попробуйте сами »

В этом примере мы анимируем свойство background-color. Сначала мы задаём идентификатор для анимации: backgrounds. Затем устанавливаем селекторы ключевых кадров (0%, 50% и 100%) и определяем значения свойства: зелёный, синий и серый. Это означает, что в начальной точке (0%) цвет фона будет светло-зелёным вплоть до следующего ключевого кадра (50%). В середине последовательности анимации фон станет светло-синим, а в конечной точке (100%) — серым.

Пример правила @keyframes:

Пример at-правила CSS @keyframes со значением infinite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        height: 100px;
        background: red;
        border-radius: 50%;
        position: relative;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes rule example</h2>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример использования правила @keyframes для создания эффекта падающего изображения:

Пример at-правила CSS @keyframes со свойством transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        transform-origin: left center;
        animation: fall 5s infinite;
      }
      @keyframes fall {
        from {
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50" />
    </div>
  </body>
</html>
Попробуйте сами »

Компоненты синтаксиса

КомпонентОписание
identifierЗадаёт имя анимации. Обязательный.
keyframe-selectorЗадаёт процент длительности анимации. Принимает значения от 0% до 100%, from (0%) или to (100%). Обязательный.
declaration-blockСодержит CSS-свойства и значения, применяемые в каждом ключевом кадре. Обязательный.

Распространённые ошибки

  • @keyframes сам по себе ничего не делает. Правило лишь определяет анимацию. Ничто не будет двигаться, пока вы не укажете имя в элементе с помощью свойства animation-name (или сокращённого свойства animation) и не зададите ненулевое значение animation-duration.
  • Имена чувствительны к регистру и не должны быть зарезервированными ключевыми словами CSS. Избегайте таких зарезервированных слов, как none, initial, inherit и unset, в качестве имён анимаций.
  • Дублирующиеся правила ключевых кадров каскадируются. Если два блока @keyframes имеют одинаковое имя, полностью победит последнее из определённых — они не объединяются.
  • !important внутри ключевого кадра игнорируется. Спецификация Animations специально отбрасывает объявления !important внутри ключевых кадров.

Связанные темы

  • animation — сокращённое свойство, связывающее определение ключевого кадра с элементом.
  • animation-name — выбирает, какое правило @keyframes выполняется.
  • animation-duration — продолжительность одного цикла.
  • animation-timing-function — кривая сглаживания между ключевыми кадрами.
  • animation-iteration-count — количество повторений анимации.

Практика

Практика
Что верно относительно CSS keyframes?
Что верно относительно CSS keyframes?
Was this page helpful?