Layout ed effetti con CSS3 - HTML5 con CSS e JavaScript - page 114

Figura 5.17 - La prima immagine mostra l'elemento div nello stato iniziale. La seconda
immagine mostra l'elemento div a metà della transizione. La terza immagine mostra
l'elemento div alla fine della transizione.
Oltre a specificare la durata di una transizione, possiamo anche specificarne il ritardo ini-
ziale attraverso la proprietà transition-delay . Riprendendo l'esempio 5.22 , possia-
mo stabilire che la transizione inizia solo se il mouse rimane all'interno dell'elemento div
per almeno un secondo attraverso il seguente codice.
Esempio 5.23
div
{
...
transition-property: background-color, width, color;
transition-duration: 2s;
transition-delay: 1s;
}
Utilizzando la durata della transizione, il browser calcola in automatico i valori della
transizione stessa. Riprendendo sempre l'esempio 5.22 , il browser sa che deve allargare
l'elemento div di 300 pixel in due secondi e quindi esegue i calcoli matematici per garan-
tire che la transizione avvenga in maniera graduale.
Se necessario, possiamo decidere come i valori intermedi della transizione vengono cal-
colati attraverso la proprietà CSS transition-timing-function . Questa proprietà
può avere una serie di valori predefiniti (le cosiddette funzioni di easing) , oppure un valore
personalizzato. Sia le funzioni predefinite sia il valore personalizzato sono basati sulla cur-
va di bezier . I valori che può assumere la proprietà transition-timing-function
sono elencati di seguito:
ease : equivale ai valori (0.25, 0.1, 0.25, 1.0) della curva di bezier;
linear : equivale ai valori (0.0, 0.0, 1.0, 1.0) della curva di bezier;