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

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

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

Свойство animation-direction входит в число свойств CSS3.

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

Синтаксис

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

css

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

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

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

Значения

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

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

Синтаксис ​

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

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

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

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

Значения ​

Практика ​

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

Синтаксис

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

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

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

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

Значения

Практика