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

Свойство animation-direction CSS задаёт, должна ли анимация воспроизводиться вперёд, назад или попеременно в обоих направлениях.

Часто удобно использовать сокращённое свойство animation, чтобы задать все свойства анимации сразу.

Попробуйте

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Синтаксис

/* 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: revert;
animation-direction: revert-layer;
animation-direction: unset;

Значения

Это свойство задаётся списком следующих ключевых слов, разделённых запятыми:

normal

Анимация воспроизводится вперёд в каждом цикле. Другими словами, при каждом цикле анимация сбрасывается в начальное состояние и запускается снова. Это значение по умолчанию.

reverse

Анимация воспроизводится назад в каждом цикле. Другими словами, при каждом цикле анимация сбрасывается в конечное состояние и запускается снова. Шаги анимации выполняются в обратном порядке, а функции плавности также инвертируются. Например, функция плавности ease-in становится ease-out.

alternate

Анимация меняет направление в каждом цикле; первая итерация воспроизводится вперёд. Отсчёт для определения чётности или нечётности цикла начинается с единицы.

alternate-reverse

Анимация меняет направление в каждом цикле; первая итерация воспроизводится назад. Отсчёт для определения чётности или нечётности цикла начинается с единицы.

Формальное определение

Формальный синтаксис

animation-direction = 
  <single-animation-direction>#

<single-animation-direction> = 
  normal |
  reverse |
  alternate |
  alternate-reverse

Примеры

Изменение направления анимации на обратное

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат

Примеры см. в разделе CSS-анимации.

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

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

См. также

• Использование CSS-анимаций
• API AnimationEvent в JavaScript
• Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function