Movimento

Transizioni e animazioni

Le animazioni rendono l’interfaccia più comunicativa. Vanno usate con misura per guidare l’attenzione senza disturbare.

Teoria rapida

transitionGestisce cambiamenti graduali.
transformSposta, scala o ruota elementi.
@keyframesDefinisce fasi di animazione.

Esempi interattivi

Modifica il codice e osserva l’anteprima live.

Animazione con keyframes

Pallina animata con transform e timing function.

@keyframes
Codice modificabile
Risultato live

Bottone con transizione

Micro-interazione con transform, shadow e transition.

transition
Codice modificabile
Risultato live
Verifica

Quiz su Animazioni CSS

Rispondi alle domande per controllare subito la comprensione dell’argomento.

1. A cosa serve transition?

2. A cosa serve transform?

3. Che cosa definisce @keyframes?

4. Quale proprietà imposta la durata di una animazione?

5. Quale valore ripete una animazione all’infinito?

6. Per performance è spesso meglio animare...

Esercitazione libera

Laboratorio libero: Animazioni CSS

Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.