Przykład
Czy animację raz, a następnie zrobić animację do tyłu:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość animacja-kierunek określa, czy animacja powinna odgrywać w odwrotnym kierunku lub w naprzemiennych cyklach.
| Domyślna wartość: | normal |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.animationDirection="reverse" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| animation-direction | 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- |
Składnia CSS
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| normal | Domyślna wartość. Animacja powinny być odtwarzane jako normalne | Graj " |
| reverse | Animacja powinna odgrywać w odwrotnym kierunku | Graj " |
| alternate | Animacja będzie odtwarzana normalnie za każdym razem nieparzystą (1,3,5,etc..) oraz w kierunku odwrotnym każdy nawet czasu (2,4,6,etc...) | Graj " |
| alternate-reverse | Animacja będzie odtwarzana w odwrotnym kierunku za każdym razem nieparzystą (1,3,5,etc..) i przy normalnym kierunku każdą nawet czasu (2,4,6,etc...) | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Uwaga: "reverse" i "alternate-reverse" wartości nie są obsługiwane w Safari.
Podobne strony
Tutorial CSS3: CSS3 animacje
Odniesienia HTML DOM: animationDirection property