Свойство CSS animation-direction

Свойство CSS animation-direction задаёт способ воспроизведения анимации: вперёд, назад или в чередующихся циклах. Значение по умолчанию — normal.

На этой странице описано, что делает каждое значение, как использовать свойство вместе с остальными свойствами анимации, а также распространённые ошибки (например, почему alternate выглядит как normal, пока не увеличишь счётчик итераций).

Что контролирует animation-direction

Когда вы определяете анимацию с помощью @keyframes, правило описывает один проход от 0% до 100%. Свойство animation-direction определяет в каком направлении каждая итерация воспроизводит этот временной ряд:

Вперёд — от 0% до 100% (естественный порядок чтения ключевых кадров).
Назад — от 100% до 0%, при этом также обращается функция времени (ease-in воспроизводится как ease-out).
Поочерёдно — нечётные и чётные итерации воспроизводятся в противоположных направлениях, поэтому элемент плавно движется туда и обратно без резкого скачка.

Именно это позволяет написать один набор ключевых кадров и получить эффект движения «туда-обратно» бесплатно, не описывая обратный путь вручную.

Если для любого свойства анимации указано несколько значений через запятую, они применяются по порядку к соответствующим анимациям, определённым в animation-name.

Свойство animation-direction является одним из свойств CSS3 и обычно задаётся вместе с animation-iteration-count, animation-duration и другими отдельными свойствами или объединяется в сокращённое свойство animation.

Начальное значение	normal
Применяется к	Всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS3
DOM Syntax	object.style.animationDirection = "reverse"

Синтаксис

Синтаксис свойства CSS animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Пример свойства animation-direction:

Пример свойства CSS animation-direction со значением normal

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Пример свойства animation-direction со значением "reverse":

Пример свойства CSS animation-direction со значением reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>In this example the animation plays as reverse.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Пример свойства animation-direction со значением "alternate":

Пример свойства CSS animation-direction со значением alternate

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays first forwards, then backwards.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Пример свойства animation-direction со значением "alternate-reverse":

Пример свойства CSS animation-direction со значением alternate-reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate-reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards, then forwards.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Использование в сокращённом свойстве animation

animation-direction — лишь одна из составных частей анимации. Его можно задать отдельно, но чаще всего оно записывается в составе сокращённого свойства animation, где ключевое слово направления может стоять в любом месте среди других значений:

/* name | duration | timing-function | iteration-count | direction */
animation: myfirst 5s ease-in-out 2 alternate;

Оба правила ниже описывают абсолютно одинаковую анимацию:

/* Longhand */
.box {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

/* Shorthand — equivalent */
.box {
  animation: myfirst 5s 2 alternate;
}

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

alternate требует более одной итерации. При значении animation-iteration-count: 1 по умолчанию анимация выполняется только один раз, поэтому «обратный путь» никогда не происходит, и alternate выглядит так же, как normal. Установите счётчик равным 2 (или больше, или infinite), чтобы увидеть эффект.
reverse — это не то же самое, что alternate. reverse воспроизводит каждую итерацию от конца к началу; alternate меняет направление при каждой итерации. Используйте reverse, чтобы постоянно воспроизводить ключевые кадры в обратном порядке, и alternate для цикла «туда-обратно».
Функция времени тоже обращается. Когда итерация воспроизводится в обратном направлении, её функция времени зеркально отражается, что обеспечивает визуальную согласованность easing в точках разворота.

Значения

Значение	Описание	Пример
normal	Значение по умолчанию; анимация воспроизводится вперёд.	Пример »
reverse	Анимация воспроизводится в обратном направлении. При каждом запуске она сбрасывается до конца и начинается снова. Функция времени также обращается.	Пример »
alternate	Сначала анимация движется вперёд, затем назад. Требует `animation-iteration-count` ≥ 2 для видимого эффекта.	Пример »
alternate-reverse	Сначала анимация движется назад, затем вперёд. Требует `animation-iteration-count` ≥ 2 для видимого эффекта.	Пример »
initial	Устанавливает свойство в значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какие значения может принимать свойство CSS animation-direction?