Atrybut animation-direction CSS

Definicja i użycie

animation-direction Definicja, czy animacja powinna być odtwarzana okresowo w przeciwnym kierunku.

Jeśli wartość animation-direction wynosi "alternateJeśli ustawienie animacji na "normal", animacja będzie odtwarzana normalnie w liczbie nieparzystych (1, 3, 5 itp.), a w liczbie parzystych (2, 4, 6 itp.) odtwarzana w kierunku przeciwnym.

Komentarz:Jeśli ustawienie animacji na jednorazowe odtwarzanie, właściwość ta nie ma efektu.

Zobacz również:

CSS3 Tutorial:Animacje CSS

HTML DOM Reference Manual:animationDirection właściwość

Przykład

Zatrzymanie animacji:

div {
  animation-direction: alternate;
}

Spróbuj sam

CSS syntax

animation-direction: normal|alternate;
Wartość Opis Test
normal Domyślna wartość. Animacja powinna być odtwarzana normalnie. Test
alternate Animacja powinna być odtwarzana w sposób okresowy w przeciwnym kierunku. Test

Techniczne szczegóły

Domyślna wartość: normal
Inheritance: nie
Wersja: CSS3
JavaScript syntax: obiekt.style.animationDirection="alternate"

Wsparcie przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Zawierające -webkit-、-moz- lub -o- liczby oznaczają pierwszą wersję używającą prefiksu.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-