CSS свойство animation-direction
Определение и применение
Свойство animation-direction задаёт направление воспроизведения каждого цикла анимации элемента: прямое,
обратное или чередующееся.
Основы и примеры — в
уроке об анимациях CSS. Несколько
настроек можно объединить сокращённым свойством
animation.
В генераторе анимаций можно сравнить все четыре направления и настроить повторения.
Попробуйте значения animation-direction
Сравните направление проходов. alternate меняет его после каждого прохода.
animation-direction: normal
HTML и CSS примера
<div class="stage">
<div class="demo-target">CSS</div>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
display: grid;
place-items: center;
padding: 20px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.demo-target {
width: 100px;
height: 80px;
display: grid;
place-items: center;
border: 3px solid #245a85;
background: #ffe4bd;
animation-name: travel;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes travel {
from {
transform: translateX(-55px);
}
to {
transform: translateX(55px);
}
}
@keyframes turn {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
display: grid;
place-items: center;
padding: 20px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.demo-target {
width: 100px;
height: 80px;
display: grid;
place-items: center;
border: 3px solid #245a85;
background: #ffe4bd;
animation-name: travel;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: reverse;
}
@keyframes travel {
from {
transform: translateX(-55px);
}
to {
transform: translateX(55px);
}
}
@keyframes turn {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
display: grid;
place-items: center;
padding: 20px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.demo-target {
width: 100px;
height: 80px;
display: grid;
place-items: center;
border: 3px solid #245a85;
background: #ffe4bd;
animation-name: travel;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes travel {
from {
transform: translateX(-55px);
}
to {
transform: translateX(55px);
}
}
@keyframes turn {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
display: grid;
place-items: center;
padding: 20px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.demo-target {
width: 100px;
height: 80px;
display: grid;
place-items: center;
border: 3px solid #245a85;
background: #ffe4bd;
animation-name: travel;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes travel {
from {
transform: translateX(-55px);
}
to {
transform: translateX(55px);
}
}
@keyframes turn {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
Поддержка браузерами
Спецификация: CSS animations
Поддерживается во всех основных браузерах с 2016 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
animation-direction | 43 Версия 43 выпущена в 2015 г. Версия 3 выпущена в 2009 г. — Префикс -webkit- | 12 Версия 12 выпущена в 2015 г. Версия 12 выпущена в 2015 г. — Префикс -webkit- | 16 Версия 16 выпущена в 2012 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 5 выпущена в 2011 г. — Префикс -moz- | 30 Версия 30 выпущена в 2015 г. Версия 15 выпущена в 2013 г. — Префикс -webkit- Версия 12.1 выпущена в 2012 г. — Удалено в 15 Версия 12 выпущена в 2012 г. — Удалено в 15; Префикс -o- | 9 Версия 9 выпущена в 2015 г. Версия 4 выпущена в 2009 г. — Префикс -webkit- | 43 Версия 43 выпущена в 2015 г. Версия 18 выпущена в 2012 г. — Префикс -webkit- | 16 Версия 16 выпущена в 2012 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 5 выпущена в 2011 г. — Префикс -moz- | 30 Версия 30 выпущена в 2015 г. Версия 14 выпущена в 2013 г. — Префикс -webkit- Версия 12.1 выпущена в 2012 г. — Удалено в 14 Версия 12 выпущена в 2012 г. — Удалено в 14; Префикс -o- | 9 Версия 9 выпущена в 2015 г. Версия 3.2 выпущена в 2010 г. — Префикс -webkit- | 4.0 Версия 4.0 выпущена в 2016 г. Версия 1.0 выпущена в 2013 г. — Префикс -webkit- | 43 Версия 43 выпущена в 2015 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit- | 9 Версия 9 выпущена в 2015 г. Версия 3.2 выпущена в 2010 г. — Префикс -webkit- |
alternate | 3 | 12 | 5 | 15 | 4 | 18 | 5 | 14 | 3.2 | 1.0 | 4.4 | 3.2 |
alternate-reverse | 19 | 12 | 16 | 12.1 | 6 | 25 | 16 | 12.1 | 6 | 1.5 | 4.4 | 6 |
normal | 3 | 12 | 5 | 15 | 4 | 18 | 5 | 14 | 3.2 | 1.0 | 4.4 | 3.2 |
reverse | 19 | 12 | 16 | 12.1 | 6 | 25 | 16 | 12.1 | 6 | 1.5 | 4.4 | 6 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
animation-direction: [ normal | reverse | alternate | alternate-reverse ]#;
/* Глобальные значения */
animation-direction: initial | inherit | unset | revert | revert-layer;
Знак # означает одно или несколько значений через запятую. Знак | разделяет варианты.
Квадратные скобки группируют варианты.
JavaScript синтаксис:
element.style.animationDirection = "alternate";Начальное значение свойства
normal.
Значения свойства
| Значение | Описание |
|---|---|
normal |
Каждый цикл идёт от начального кадра к конечному. При повторе начинается новый прямой проход. Начальное значение. |
reverse |
Каждый цикл идёт от конечного кадра к начальному. |
alternate |
Нечётные циклы идут прямо, чётные — в обратную сторону. Первый цикл прямой. |
alternate-reverse |
Нечётные циклы идут в обратную сторону, чётные — прямо. Первый цикл обратный. |
initial |
Устанавливает начальное значение свойства. |
inherit |
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства animation-direction устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Значения через запятую соответствуют именам в
animation-name
по порядку. Если значений меньше, список повторяется; лишние значения не используются.
Направление и функция времени
Обратный проход разворачивает и функцию времени: например, ускорение ease-in превращается в замедление.
Один проход считается одним циклом, поэтому движение туда и обратно при alternate требует двух циклов.
Количество задаёт
animation-iteration-count.
Спецификация
Наследуется
Нет.
Анимируемое
Нет.
Примеры, попробуйте сами
Направление движения
Сравните normal и alternate. Замените alternate на reverse или alternate-reverse и посмотрите, откуда начинается движение и что происходит между повторами. Затем замените linear на ease-in и сравните характер движения при прямом и обратном проходе.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.4 system-ui,
sans-serif;
color: #172c3d;
}
.track {
position: relative;
height: 70px;
margin-top: 16px;
border: 1px dashed #607589;
background: #edf2f5;
}
.box {
position: absolute;
top: 12px;
left: 0;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 6px;
background: #245a85;
color: white;
}
.run:not(:checked) ~ .track .box {
animation-name: none;
}
index.html
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
<div class="track second"><span class="box">B</span></div>
style.css
.box {
animation-name: travel;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
.second .box {
animation-direction: alternate;
}
/* Длина пути зависит от ширины дорожки: пример помещается на телефоне. */
@keyframes travel {
from {
left: 0;
background: #a64400;
}
to {
left: calc(100% - 42px);
background: #16703c;
}
}