Proprietà animation

La proprietà animation è una proprietà scorciatoia per le animazioni, permette di impostare tutte le proprietà per l'animazione simultaneamente: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

L'ordine dei valori non è importante, il tempo di esecuzione dell'animazione animation-duration deve obbligatoriamente essere posizionato prima del ritardo animation-delay. Le uniche proprietà obbligatorie sono animation-name e animation-duration.

La proprietà può anche accettare il valore none, che disabilita completamente l'animazione. Questo valore è il valore predefinito.

Sintassi

selettore {
	animation: valori;
}

Esempio

In questo esempio ci sarà un ritardo prima dell'animazione di 3 secondi (prima di ogni nuova riproduzione), e poi l'animazione verrà riprodotta per 6 secondi:

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

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

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Esempio . Possibili problemi

Un'animazione, scritta in forma abbreviata, potrebbe non funzionare a causa del suo nome. Consideriamo la seguente animazione:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Nota, sto usando il nome dell'animazione reverse. A prima vista, tutto bene, ma l'animazione non funziona, poiché reverse è una parola chiave valida per la proprietà animation-direction.

Inoltre, l'animazione non funzionerà se si utilizzano in forma abbreviata altre parole chiave nel nome. Ma tutto funziona bene quando si utilizza la forma "completa" di descrizione.

Tra le parole chiave-valori di animation-direction che interrompono le animazioni, ci sono anche le parole chiave relative alle funzioni di easing, e anche infinite, alternate, running, paused e così via.

Vedi anche

il comando @keyframes,
che definisce i fotogrammi chiave dell'animazione
le transizioni fluide transition, che rappresentano un'animazione al passaggio del mouse sull'elemento