Transition CSS: come usare la proprietà per le animazioni

Con CSS3 sono arrivate parecchie funzionalità nuove per costruire effetti notevoli, e una delle più utili è la proprietà transition.

La proprietà transition è un modulo introdotto da CSS3. Serve a creare un effetto di cambiamento dinamico su un tag HTML o su una classe, con una sintassi semplice:

transition: property duration timing-function delay;

Le transizioni CSS3 sono un ottimo modo per aggiungere un po’ di animazione a un sito senza scrivere una riga di JavaScript. Prima di cominciare, puoi dare un’occhiata a un tutorial CSS che ho scritto e che sfrutta questa proprietà:
Tutorial – Creare una card in CSS

La proprietà

Prima di tutto, perché transition funzioni devi definire la proprietà standard su cui verrà applicata. Nel nostro esempio mettiamo una transizione su background-color. Per scrivere la proprietà da sola basta questo:

transition-property: background-color;

La transizione

Una volta scelta la proprietà, servono un valore di partenza e un valore di arrivo. Nel nostro esempio c’è un colore iniziale, poi un valore finale legato a un’altra condizione.
Qui impostiamo transition su background-color, poi il valore iniziale di background-color sull’elemento #element, e infine il valore finale applicato quando l’utente passa il mouse sull’elemento, con #element:hover:

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

La durata dell’animazione

Ora che abbiamo la proprietà da animare con i suoi valori di partenza e di arrivo, resta da definire la durata della transizione. Si fa indicando una durata in secondi o in millisecondi, così:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Il div #element cambierà quindi background-color nell’arco di 200 millisecondi (0,2 secondi)

La proprietà transition-timing-function

Questo codice basta a creare una transizione, ma possiamo usare anche la proprietà transition-timing-function. Serve a cambiare il modo in cui la transizione si svolge. Di default la transizione segue la curva ease. Puoi però scegliere uno degli altri effetti nativi oppure passare una curva di Bézier per costruire il tuo effetto.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

Ecco il risultato nel nostro esempio:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Ritardare la transizione

Come per la durata, la proprietà transition-delay permette di far partire l’effetto con un ritardo.

transition-delay: 1s;

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···