CSS3 Transitions: esempi con le pseudo-classi

[]

Uno dei moduli introdotti nei CSS3 è quello delle transitions, che ci consente di realizzare effetti di transizione utilizzando solo i CSS, senza l’aggiunta di codice javascript, ma solo modificando le proprietà del CSS, nelle quali potremmo specificare il tipo di transizione e la durata.
Uno degli usi più comuni delle CSS3 transitions è quello in congiunzione della pseudo-class :hover, ma è possibile ottenere effetti interessanti anche con altre pseudo-classi.

Transitions con :hover

Ecco un tipico esempio di una transizione sul cambio colore di un elemento che si ha attraverso il mouse hover

a, a:link, a:visited {
color: lightblue;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-o-transition: color .4s linear;
-ms-transition: color .4s linear;
transition: color .4s linear;
}

a:hover {
color: white;
}

Questo animerà la transizione del colore quando si passa con il mouse sopra un link.
Passa sopra il mouse

Transitions con :active

L’utilizzo della pseudo-classe :active corrisponde a qualsiasi elemento che è in procinto di essere attivato. Il modo principale per cui un elemento viene “attivato” si ha attraverso il clic del mouse sull’elemento, o il mousedown.

Ecco un esempio CSS, inserendo delle transitions nell’elemento non attivo si simulerà una transizione anche nel mousedown. Se avessivo inserita solo nella pseudo class :active avremmo avuto un’animazione solo cliccando l’elemento.

.box {
    width: 300px;
    height: 300px;
    background: #ADC8D5;
    -webkit-transition: width 2s ease, height 2s ease;
    -moz-transition: width 2s ease, height 2s ease;
    -o-transition: width 2s ease, height 2s ease;
    -ms-transition: width 2s ease, height 2s ease;
    transition: width 2s ease, height 2s ease;
}  

.box:active {
    width: 500px;
    height: 500px;
}

Con questo codice, la larghezza e l’altezza del box aumentano quando si tiene premuto il mouse sull’elemento. Una volta rilasciato il click, il box torna alle sue dimensioni originali.

Ecco una demo

Tieni premuto il click del mouse

Transitions con :focus

È possibile utilizzare :focus per fare qualcosa di simile. Questa esempio mostra un form che si allarga quando vengono selezionati i box di input.

input, textarea {
    width: 280px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
}  

input:focus, textarea:focus {
    width: 340px;
}

Ecco l’esempio


Leggi anche