Guinguette Marais Poitevin

Animazioni CSS

CSS permette l’animazione di elementi HTML senza usare JavaScript o Flash!

In questo capitolo imparerete le seguenti proprietà:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

Supporto del browser per le animazioni

I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.

Cosa sono le animazioni CSS?

Un’animazione permette ad un elemento di cambiare gradualmente da uno stile ad un altro.

Puoi cambiare tutte le proprietà CSS che vuoi, tutte le volte che vuoi.

Per usare l’animazione CSS, devi prima specificare alcuni fotogrammi chiave per l’animazione.

I fotogrammi chiave contengono quali stili l’elemento avrà in certi momenti.

La regola @keyframes

Quando specifichi gli stili CSS all’interno della regola @keyframes, l’animazione cambierà gradualmente dallo stile corrente al nuovo stile in certi momenti.

Per far funzionare un’animazione, dovete legare l’animazione ad un elemento.

L’esempio seguente lega l’animazione “esempio” all’elemento <div>. L’animazione durerà 4 secondi, e cambierà gradualmente il colore di sfondo dell’elemento <div> da “rosso” a “giallo”:

Nota: La proprietà animation-duration definisce quanto tempo un’animazione dovrebbe impiegare per essere completata. Se la proprietà animation-duration non è specificata, non ci sarà alcuna animazione, perché il valore predefinito è 0s (0 secondi).

Nell’esempio sopra abbiamo specificato quando lo stile cambierà usando le parole chiave “from” e “to” (che rappresentano 0% (inizio) e 100% (completamento)).

È anche possibile usare la percentuale. Usando la percentuale, puoi aggiungere tutti i cambiamenti di stile che vuoi.

L’esempio seguente cambierà il colore di sfondo dell’elemento <div> quando l’animazione è completa al 25%, al 50% e di nuovo al 100%:

L’esempio seguente cambierà sia il colore di sfondo che la posizione dell’elemento <div> quando l’animazione è completa al 25%, al 50% e di nuovo al 100%:

Ritarda un’animazione

La proprietà animation-delay specifica un ritardo per l’inizio di un’animazione.

L’esempio seguente ha un ritardo di 2 secondi prima di iniziare l’animazione:

Sono ammessi anche valori negativi. Se si usano valori negativi, l’animazione inizierà come se fosse già in corso da N secondi.

Nel seguente esempio, l’animazione inizierà come se fosse già in corso da 2 secondi:

Imposta quante volte un’animazione deve essere eseguita

La proprietà animation-iteration-count specifica il numero di volte che un’animazione deve essere eseguita.

L’esempio seguente eseguirà l’animazione 3 volte prima di fermarsi:

L’esempio seguente usa il valore “infinito” per far continuare l’animazione per sempre:

Esegui animazione in direzione inversa o a cicli alternati

La proprietà animation-direction specifica se un’animazione deve essere riprodotta in avanti, indietro o a cicli alternati.

La proprietà animation-direction può avere i seguenti valori:

• normal – L’animazione viene riprodotta normalmente (in avanti). Questo è il valore predefinito
• reverse – L’animazione viene riprodotta in direzione inversa (all’indietro)
• alternate – L’animazione viene riprodotta prima in avanti, poi all’indietro
• alternate-reverse – L’animazione viene riprodotta prima all’indietro, poi in avanti

L’esempio seguente eseguirà l’animazione in direzione inversa (indietro):

L’esempio seguente usa il valore “alternate” per far girare l’animazione prima in avanti e poi all’indietro:

L’esempio seguente usa il valore “alternate-reverse” per far girare l’animazione prima all’indietro, poi in avanti:

Specifica la curva di velocità dell’animazione

La proprietà animation-timing-function specifica la curva di velocità dell’animazione.

La proprietà animation-timing-function può avere i seguenti valori:

• ease – Specifica un’animazione con un inizio lento, poi veloce, poi finisce lentamente (questo è il default)
• linear – Specifica un’animazione con la stessa velocità dall’inizio alla fine
• ease-in – Specifica un’animazione con un inizio lento
• ease-out – Specifica un’animazione con una fine lenta
• ease-in-out – Specifica un’animazione con un inizio e una fine lenti
• cubic-bezier(n,n,n,n) – Permette di definire i propri valori in una funzione cubic-bezier

L’esempio seguente mostra alcune delle diverse curve di velocità che possono essere utilizzate:

Specificare il fill-mode per un’animazione

Le animazioni CSS non influenzano un elemento prima che il primo keyframe sia riprodotto o dopo che l’ultimo keyframe sia riprodotto. La proprietà animation-fill-mode può sovrascrivere questo comportamento.

La proprietà animation-fill-mode specifica uno stile per l’elemento di destinazione quando l’animazione non è in esecuzione (prima che inizi, dopo che finisce, o entrambi).

La proprietà animation-fill-mode può avere i seguenti valori:

• none – Valore predefinito. L’animazione non applicherà alcuno stile all’elemento prima o dopo la sua esecuzione
• forwards – L’elemento manterrà i valori di stile che è impostato dall’ultimo keyframe (dipende da animation-direzione e animation-iteration-count)
• backwards – L’elemento otterrà i valori di stile che è impostato dal primo keyframe (dipende da animation-direction), e lo manterrà durante il periodo di ritardo dell’animazione
• both – L’animazione seguirà le regole sia in avanti che indietro, estendendo le proprietà dell’animazione in entrambe le direzioni

L’esempio seguente permette all’elemento <div> di mantenere i valori di stile dell’ultimo keyframe quando l’animazione finisce:

L’esempio seguente permette all’elemento <div> di ottenere i valori di stile impostati dal primo keyframe prima che l’animazione inizi (durante il periodo di ritardo dell’animazione):

L’esempio seguente permette all’elemento <div> di ottenere i valori di stile impostati dal primo keyframe prima dell’inizio dell’animazione, e mantenere i valori di stile dell’ultimo keyframe quando l’animazione finisce:

Proprietà sintetiche di animazione

L’esempio qui sotto usa sei delle proprietà di animazione:

Lo stesso effetto di animazione di cui sopra può essere ottenuto utilizzando la proprietà sintetica animation:

Proprietà di animazione CSS

La seguente tabella elenca la regola @keyframes e tutte le proprietà di animazione CSS: