Метод использования и примеры свойств animation-direction CSS3

Атрибут animation-direction CSS3 определяет, должна ли анимация играть в обратном порядке в альтернативном цикле.

В таблице ниже суммированы контексты использования и история версий этого свойства.

Грамматика использования animation-direction

Грамматика этого свойства такая:

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Ниже приведен пример того, как использовать атрибут animation-direction.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration: 4s;
　　　　-webkit-animation-iteration-count: 2;
　　　　-webkit-animation-direction: alternate;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　4s;
　　　　animation-iteration-count:　2;
　　　　animation-direction:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Значения атрибута

В таблице ниже описаны значения этого атрибута.

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

Совместимость браузеров для атрибута animation-direction, все основные браузеры поддерживают этот атрибут.

Дополнительное чтение

Пожалуйста, ознакомьтесь с следующим руководством:Анимации CSS3。

Связанные атрибуты и правила:animation，animation-name，animation-delay，animation-timing-function，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。