Categorie
CSS

CSS Transitions

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!

In questo esempio passando il mouse sopra il box, questo scomparirà in un secondo
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;}
All’ hover cambio colore e dimensioni del box con tempi diversi
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;}

Risorse

http://www.w3.org/TR/css3-transitions/

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.