animation-direction¶

Свойство animation-direction устанавливает направление движения анимации.

Синтаксис¶

/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Значения¶

normal: Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
alternate: Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
reverse: Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию.
alternate-reverse: Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.

Значение по-умолчанию:

animation-direction: normal;

Применяется к: Ко всем элементам, к псевдоэлементам ::before и ::after

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

CSS Animations

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

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

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>animation-direction</title>
    <style>
      .box {
        background: #fc0;
        width: 100px;
        height: 100px;
        text-align: center;
        position: absolute;
        animation: move 5s infinite;
        -webkit-animation: move 5s infinite;
      }
      .normal {
        animation-direction: normal;
        -webkit-animation-direction: normal;
      }
      .alternate {
        top: 150px;
        animation-direction: alternate;
        -webkit-animation-direction: alternate;
      }
      .reverse {
        top: 300px;
        animation-direction: reverse;
        -webkit-animation-direction: reverse;
      }
      .alternate-reverse {
        top: 450px;
        animation-direction: alternate-reverse;
        -webkit-animation-direction: alternate-reverse;
      }
      @-webkit-keyframes move {
        from {
          left: 0;
        }
        to {
          left: calc(100% - 100px);
        }
      }
      @keyframes move {
        from {
          left: 0;
        }
        to {
          left: calc(100% - 100px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box normal">normal</div>
    <div class="box alternate">alternate</div>
    <div class="box reverse">reverse</div>
    <div class="box alternate-reverse">alternate-reverse</div>
  </body>
</html>

В данном примере показано разное движение квадратов от одного края окна браузера до другого.

Примечание¶

Chrome до версии 43, Safari до версии 9 и Android поддерживают свойство -webkit-animation-direction.
Opera до версии 12.10 поддерживает свойство -o-animation-direction.
Firefox до версии 16 поддерживает свойство -moz-animation-direction.