Tra le nuove specifiche dei CSS troviamo un modulo molto interessante che ci permette di ottenere effetti di transazione fino ad ora realizzabili soltanto con linguaggi come javascript; si tratta dei CSS Transitions
Normalmente il cambiamento del valore di una proprietà di un foglio di stile, si concretizza nell’immediato mutamento dell’elemento HTML al quale lo stile è applicato.
Con le transazioni possiamo invece stabilire una durata di tempo (in secondi) nel quale si realizzerà il graduale cambiamento del valore di una proprietà, dandoci così l’effetto di un’animazione.
Soltanto le proprietà CSS animabili possono essere effetto di transazione; l’elenco lo potete consultare a questo indirizzo.
La transazione di una proprietà è definita attraverso alcune nuove proprietà.
La proprietà: transition-property
Specifica il nome delle proprietà CSS che sono oggetto della transazione.
Come valore potrà avere ‘none’ cioè nessuna proprietà potrà essere transatta; ‘all’ significa che ogni proprietà che potrà subire una transazione lo farà, oppure (ipotesi più realistica) bisogna specificare un elenco di proprietà (separate da virgola) alle quali andrà applicato l’effetto.
Il valore di default è ‘all’, quindi se la proprietà non viene specificata, mentre la durata si, allora tutte le proprietà dell’elemento saranno transatte.
{
transition-property: opacity, left, top, width;
}
La proprietà: transition-duration
Indica il tempo che richiede una transazione per essere realizzata. Viene espressa in secondi ed il valore di default è ‘0’ cioè nel passaggio dal nuovo al vecchio valore non ci sarà nessuna animazione.
Un valore negativo verrà interpretato come ‘0’.
{
transition-duration: 2s, 1s;
}
La proprietà: transition-timing-function
Questa proprietà descrive come i valori intermedi della transazione saranno calcolati.
In pratica anzichè avere un’animazione lineare nella durata di tempo, possiamo ottenere un aumento od una diminuzione della velocità della transazione durante il lasso di tempo.
Questi effetti sono comunemente chiamati funzioni di easing, e li possiamo ottenere attraverso la funzione matematica: Curva di Bézier
La proprietà accetta i seguenti valori (riferibili ad altrettante funzioni):
- ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1.0).
- linear equivale a cubic-bezier(0.0, 0.0, 1.0, 1.0).
- ease-in equivale a cubic-bezier(0.42, 0, 1.0, 1.0).
- ease-out equivale a cubic-bezier(0, 0, 0.58, 1.0).
- ease-in-out equivale a cubic-bezier(0.42, 0, 0.58, 1.0).
- cubic-bezier specifica una curva inserendo i valori (x1, y1, x2, y2). Tutti e quattro i valori devono avere un range di [0, 1] o la definizione non è valida.
Il valore di default è: ease
{
transition-timing-function: ease;
}
La proprietà: transition-delay
Stabilisce quando la transazione partirà. In pratica possiamo impostare un ritardo (espresso in secondi) per l’inizio della transazione.
Con valore uguale a ‘0’ (valore di default) la transazione verrà eseguita immediatamente.
{
transition-delay: 2s;
}
La proprietà: transition
Questa proprietà combina le precedenti quattro proprietà in una sola. In pratica accetta come valore l’elenco dei valori delle altre proprietà nell’ordine: ‘transition-property’ || ‘transition-duration’ || ‘transition-timing-function’ || ‘transition-delay’.
CSS transitions ed i browser
Tutti i moderni browser (ad eccezione di IE) supportano il nuovo modulo, come da Working Draft del W3C, la sintassi originale si modifica con i tipici prefissi dei vari browser già usati in altre specifiche dei CSS3; avremo quindi:
-webkit-transition
-webkit-transition
-moz-transition (dalla versione 4)
-o-transition
Qualche esempio
Vediamo ora un paio di semplici esempi, che alla fine sono quelli che rendono meglio l’idea!
div{
width:600px; border:#41797F 4px solid; padding:5px; opacity: 1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
div:hover{opacity: 0;}
div{
width:300px; height:50px; background-color:#F6AA4C; padding:5px;
transition-property: width, height,background-color;
transition-duration: 4s, 2s, 6s;
transition-delay: 0s, 4s, 0s;
-webkit-transition-property: width, height,background-color;
-webkit-transition-duration: 4s, 2s, 6s;
-webkit-transition-delay: 0s, 4s, 0s;
-moz-transition-property: width, height,background-color;
-moz-transition-duration: 4s, 2s, 6s;
-moz-transition-delay: 0s, 4s, 0s;
-o-transition-property: width, height,background-color;
-o-transition-duration: 4s, 2s, 6s;
-o-transition-delay: 0s, 4s, 0s;
}
div:hover{width:600px; height:100px; background-color:#F0F0F0;}