Proprietà animation-direction

La proprietà animation-direction imposta la direzione dell'animazione. Per impostazione predefinita, l'animazione si ripeterà solo 1 volta e poi tornerà allo stato iniziale, quindi, se è impostato un ritardo animation-delay, aspetterà il tempo specificato e poi il ciclo ricomincerà da capo.

Questa proprietà permette di modificare questo comportamento, ad esempio, in modo che l'animazione, una volta terminata, rimanga nel punto in cui è finita, e non salti bruscamente alla posizione iniziale.

È anche possibile impostare un comportamento tale per cui l'animazione raggiunga il punto estremo e ritorni indietro (come in transition). Vedi la descrizione qui sotto.

Sintassi

selettore {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Valori

Valore	Descrizione
`reverse`	L'animazione verrà riprodotta in direzione inversa.
`alternate`	L'animazione verrà riprodotta prima in direzione normale, e poi in direzione inversa (come transition).
`alternate-reverse`	L'animazione verrà riprodotta dalla posizione finale a quella iniziale e viceversa. In sostanza, sono i valori `alternate` e `reverse` in un'unica soluzione.
`normal`	L'animazione verrà riprodotta dall'inizio alla fine, e dopo la fine salterà bruscamente alla posizione iniziale.

Valore predefinito: normal.

Esempio

Ora l'elemento si muoverà in una direzione, e poi tornerà indietro, poiché è impostato il valore alternate. Inoltre animation-duration ha un valore di 3 secondi e questo significa che gli spostamenti "andata" e "ritorno" dureranno 3 secondi ciascuno:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Esempio

Ora l'elemento si muoverà nella direzione opposta (dovrebbe andare da sinistra a destra, ma andrà da destra a sinistra):

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Esempio

Ora l'elemento si muoverà avanti e indietro, ma in direzione inversa (dovrebbe iniziare da sinistra, ma inizierà da destra):

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Vedi anche

la proprietà animation-name,
che imposta il nome dell'animazione
la proprietà animation-duration,
che imposta la durata dell'animazione
la proprietà animation-delay,
che imposta il ritardo prima dell'esecuzione dell'animazione
la proprietà animation-timing-function,
che imposta la velocità di esecuzione dell'animazione
la proprietà animation-iteration-count,
che imposta il numero di iterazioni dell'animazione
la proprietà animation-fill-mode,
che imposta lo stato dell'animazione
la proprietà animation-play-state,
che permette di mettere in pausa l'animazione
la proprietà animation,
che rappresenta una scorciatoia per le animazioni
il comando @keyframes,
che imposta i fotogrammi chiave dell'animazione
le transizioni fluide transition, che rappresentano un'animazione al passaggio del mouse sull'elemento