A volte è necessario creare animazioni per le modifiche degli elementi in una pagina web, controllando fattori come velocità, tempo di ritardo e durata. In questi casi, la proprietà transition può essere utilizzata per raggiungere questo obiettivo.

L'elemento presenta sempre due stati: iniziale e finale. È possibile controllare il comportamento della modifica dell'elemento tramite le seguenti proprietà:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property - Il nome della proprietà CSS che deve essere animata;
• transition-duration - Il tempo durante il quale deve avvenire la modifica dello stato dell'elemento. Si specifica in secondi (s) o millisecondi (ms);
• transition-timing-function - Specifica la curva di velocità dell'effetto di transizione. I valori tipici sono ease, linear, ease-in, ease-out e ease-in-out;
• transition-delay - Il tempo di ritardo prima dell'inizio dell'effetto di transizione. Si specifica in secondi (s) o millisecondi (ms).

Ogni proprietà verrà approfondita nel corso.

Nota

1 secondo = 1000 millisecondi. Quindi:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Pratica

Ad esempio, si desidera aggiungere un effetto di transition al colore di sfondo dell'elemento div quando viene passato sopra con il cursore. L'obiettivo è:

• Modificare la proprietà background-color;
• Il ritardo deve essere di 0.1 secondi;
• Il cambiamento del colore deve durare 0.3 secondi;
• Per la timing-function, si richiede il valore ease-in-out, il che significa che inizierà lentamente, accelererà al centro e rallenterà nuovamente alla fine.

Passare il cursore sull'elemento per visualizzare il risultato.

Abbiamo specificato tutte le proprietà relative alla transizione sull'elemento div e poi, per lo stato hover, abbiamo impostato solo la decorazione che desideriamo visualizzare.