Exemplu
Face animația o dată, apoi face animație înapoi:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Încearcă - l singur » Definiție și utilizare
Proprietatea animație direcția definește dacă o animație ar trebui să joace în sens invers sau în cicluri alternative.
| Valoare implicită: | normal |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.animationDirection="reverse" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| animation-direction | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15,0 -webkit- 12,0 -o- |
CSS Sintaxa
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;Valori de proprietate
| Valoare | Descriere | Joaca-l |
|---|---|---|
| normal | Valoare implicită. Animația trebuie să fie jucat normal | Joaca - l » |
| reverse | Animatia ar trebui să joace în sens invers | Joaca - l » |
| alternate | Animația va fi jucat normal de fiecare dată impar (1,3,5,etc..) și în direcția inversă de fiecare dată , chiar (2,4,6,etc...) | Joaca - l » |
| alternate-reverse | Animația va fi jucat în direcția inversă de fiecare dată impar (1,3,5,etc..) și într - o direcție normală de fiecare dată , chiar (2,4,6,etc...) | Joaca - l » |
| initial | Setează această proprietate la valoarea implicită. Citiți despre inițială | |
| inherit | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Notă: "reverse" și "alternate-reverse" , valorile nu sunt acceptate în Safari.
Pagini similare
Tutorial CSS3: CSS3 Animații
HTML DOM referință: animationDirection property