animation-direction CSS
Свойство animation-direction
устанавливает направление движения анимации.
- Значение по умолчанию:
normal
- Наследуется:
- Нет
- Применяется:
Ко всем элементам, к псевдоэлементам
::before
и::after
- Анимируется:
- Нет
- Объект JavaScript:
-
object.style.animationDirection
- Спецификации:
- Поддержка браузерами:
Синтаксис
/* 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
- Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.
Примеры
<!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
.