CSS  »  Articoli  »  CSS 3 

Negli ultimi anni le pagine web si sono riempite di effetti di transizione sugli oggetti realizzati con l’ausilio di Javascript. Mi riferisco ad effetti come il cambiamento del colore di sfondo di un contenitore al passaggio del mouse come quello che possiamo vedere in questo esempio.

La nuova specifica dei CSS (http://www.w3.org/TR/css3-transitions/) include un modulo, chiamato CSS Transitions,  che ci consente di realizzare questi effetti utilizzando solo il foglio di stile, senza aver bisogno di script esterni.

Il modulo consente di modificare i valori di proprietà CSS specificando la durata dell’effetto di transizione.

Normalmente, quando il valore di una proprietà CSS cambia, il risultato viene renderizzato istantaneamente e l’elemento a cui è assegnata tale proprietà viene aggiornato immediatamente. Un "rudimentale" esempio di transizione che abbiamo utilizzato finora è il seguente:

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
}
  div:hover {
    background-color: #ff5c00;
}

Vediamo dunque all’opera il secondo esempio, passando il mouse sul div colorato.

Utilizzando le transizioni, invece, è possibile assegnare una durata (espressa in secondi) per il passaggio dal vecchio valore al nuovo.

Possiamo applicare un semplice effetto di transizione di 2 secondi all’esempio precedente aggiungendo queste due semplici righe di codice CSS:

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;

  transition-property: background-color;
  transition-duration: 2s;
}
  div:hover {
    background-color: #ff5c00;
}

Le due proprietà attivano il cambiamento del colore di sfondo dal colore di partenza (contenuto nella prima regola) al colore finale (contenuto nella regola con l’hover).

La transizione dell’esempio è evidenziata in Figura 1:

Figura 1 - Transizione background-color

Altri articoli

Altre guide

Altre newsletter