Transizioni

L’ultima proprietà che analizzeremo sono le transizioni. Grazie a queste nuove capacità di CSS3 puoi far sì che il cambio di uno stato venga applicato tramite una piccola animazione, invece che in modo “secco”. La proprietà transition è la short definition di ogni singolo aspetto di una transizione:

• transition-property; definisce quale proprietà dello stile animare, se non specificata vengono animate tutte quelle presenti;

• transition-duration; definisce durata della transizione espressa in secondi (s);

• transition-timing-function; definisce la curva che genera la transizione; le possibili curve sono: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(), con l’ultima puoi definire la curva manualmente.

• transition-delay; definisce il ritardo della transizione espresso in secondi (s).

La migliore applicazione delle transizioni è sicuramente sui link, ovvero sul cambiamento degli stati:

Come puoi vedere, la proprietà transition l’ho impostata in entrambi gli stili: in questo modo avrò una transizione di un certo tipo con hover, mentre avrò un’altro tipo di transizione quando sposterò il puntatore del mouse dal link con il mouse.

Il bello delle transizioni offerte dai CSS è che ti faranno risparmiare molto codice JavaScript e, qualora una di esse non fosse supportata dal browser, il sito risulterebbe comunque utilizzabile e navigabile senza problemi. Dopotutto, animazioni e transizioni dovrebbero essere solo un modo per migliorare l’esperienza del tuo sito da parte dell’utente. E proprio per questo, se un utente utilizza un browser vecchio è anche corretto che tali transizioni non vadano ad inficiare la stabilità e la potenza della sua macchina.