Esempio
Fare l'animazione una volta, poi fare l'animazione all'indietro:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Prova tu stesso " Definizione e utilizzo
La proprietà di animazione direzione definisce se un'animazione dovrebbe svolgere in senso inverso o in cicli alternati.
| Valore di default: | normal |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.animationDirection="reverse" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| 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- |
CSS Sintassi
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| normal | Valore di default. L'animazione deve essere giocata come normale | Gioca " |
| reverse | L'animazione dovrebbe svolgere in senso inverso | Gioca " |
| alternate | L'animazione sarà giocato come di consueto ogni volta dispari (1,3,5,etc..) e in senso inverso ogni volta ancora (2,4,6,etc...) | Gioca " |
| alternate-reverse | L'animazione verrà riprodotto in senso inverso ogni volta dispari (1,3,5,etc..) ed in una direzione normale ogni volta ancora (2,4,6,etc...) | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Nota: I "reverse" e "alternate-reverse" valori non sono supportati in Safari.
Pagine correlate
CSS3 tutorial: CSS3 animazioni
Di riferimento HTML DOM: animationDirection property