animation-direction

Базовая информация Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство animation-direction CSS задаёт, как должна выполняться анимация: вперёд, назад или чередуясь вперёд-назад.

Попробуйте

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

Синтаксис

/* 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-*, они применяются к анимациям в том порядке, в котором появляются animation-name. Для случаев, когда количество анимаций и значений свойства animation-* не совпадают, см. Установка нескольких значений свойства анимации.

Примечание: При создании CSS-анимаций, управляемых прокруткой, указание свойства animation-direction работает как ожидается, например, reverse заставляет анимацию выполняться в обратном направлении по мере прохождения временной шкалы. Значение alternate (в сочетании с animation-iteration-count) заставляет анимацию выполняться вперёд и назад по мере продвижения по временной шкале.

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

Начальное значение	`normal`
Применимо к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемое

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

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 Animations Level 1 # animation-direction

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`animation-direction`	433	1212	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	93.2	4.01.0	434.4
`alternate`	3	12	5	15	4	18	5	14	3.2	1.0	4.4
`alternate-reverse`	19	12	16	12.1	6	25	16	12.1	6	1.5	4.4
`normal`	3	12	5	15	4	18	5	14	3.2	1.0	4.4
`reverse`	19	12	16	12.1	6	25	16	12.1	6	1.5	4.4

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction