Transitions CSS3

Le transizioni dei CSS consentono di creare delle animazione senza l'ausilio di script.

Considerando di avere un contenitore al quale è stato applicato un effetto hover:  

grazie alle transizioni è possibile definire la durata espressa in secondi dell'effetto hover:

• transition-property: background-color;
• transition-duration: 2s;

questo è il foglio di stile completo:

Codice CSS

 .transizione 
{ 
width: 200px ; 
height: 200px; 
background-color: #7CFC00; 
text-align: justify; 
padding: 10px; 
cursor: pointer; 

transition-property: background-color; /*standard*/ 
transition-duration: 2s; 

-webkit-transition-property: background-color; /*Safari e Chrome */ 
-webkit-transition-duration: 2s; 

-o-transition-property: background-color; /*Opera*/ 
-o-transition-duration: 2s; 

-moz-transition-property: background-color; /*Firefox*/ 
-moz-transition-duration: 2s; 

} 

.transizione:hover 
{ 
background-color:red; 
}

e considerando l'esempio di prima si ottiene questo effetto:  

1) transition-property definisce la proprietà alla quale viene applicata la transizione che in questo caso è background-color, l'elenco delle proprietà alle quali è possibile applicare la transizione è disponibile su https://www.w3.org, se tale proprietà è utilizzata senza transition-duration, cioè la durata della transizione, quest'utima avrà effetto immediato, cioè l'effetto sarebbe lo stesso che si ha senza usarla, come nel primo esempio.

2) transition-duration è la durata della transizione, cioè il tempo che la transizione impiegherà per passare dallo stato iniziale a quello finale e viceversa, il valore è espresso in secondi e di default è uguale a 0.

3) transition-delay permette di ritardare l'esecuzione della transizione di un certo numero di secondi impostati: transition-property: background-color;
transition-delay: 2s;
in questo caso l'effetto di hover che cambia il colore di sfondo verrà ritardato di 2 secondi sia per cambiare che per tornare nella condizione iniziale.

4) transition-timing-function descrive come i valori intermedi usati durante la transizione vengono calcolati, anziché utilizzare una ripartizione lineare del tempo è possibile utilizzare delle funzioni che cambiano velocità durante la transizione, tali effetti vengono identificati con il termine easing:

1. ease
2. linear
3. ease-in
4. ease-out
5. ease-in-out
6. cubic-bezier

Per quanto riguarda la compatibilità dei browser si usano i prefissi:

 transition-property: "nome della proprietà"; /*standard*/ 
transition-duration: "durata in secondi"; 

-webkit-transition-property: "nome della proprietà"; /*Safari e Chrome */ 
-webkit-transition-duration: "durata in secondi"; 

-o-transition-property: "nome della proprietà"; /*Opera*/ 
-o-transition-duration: "durata in secondi"; 

-moz-transition-property: "nome della proprietà"; /*Firefox*/ 
-moz-transition-duration: "durata in secondi"; 

transition-delay: "durata in secondi"; /*standard*/ 

-webkit-transition-delay: "durata in secondi"; /*Safari e Chrome */

-o-transition-delay: "durata in secondi"; /*Opera*/ 

-moz-transition-delay: "durata in secondi"; /*Firefox*/ 

transition-timing-function: "nome della funzione"; /*standard*/ 

-webkit-transition-timing-function: "nome della funzione"; /*Safari e Chrome */ 

-o-transition-timing-function: "nome della funzione";/*Opera*/ 

-moz-transition-timing-function: "nome della funzione"; /*Firefox*/

Per quanto riguarda IE questa proprietà è compatibile soltanto a partire dalla versione 9 del browser (IE.9).
La proprietà transition la si può estendere, nel senso che si può assegnare una durata e un ritardo diverso ad ogni proprietà alla quale si applica la transizione:

 transition-property: background-color, width, height; 
transition-duration: 4s, 6s, 8s; transition-delay: 0s, 0s, 4s;

in questo caso la durata dello scambio del colore di hover avviene in 4s, la larghezza viene cambiata in 6s e l'altezza in 8s, e un ritardo di 0s per lo sfondo e la larghezza, 4s di ritardo per l'altezza.

Demo