Transizioni con i CSS 3

Tutto quello che è valido nei CSS 2 continua ad esserlo nei CSS3, ma con l'aggiunta di molti effetti e nuove proprietà particolari. Avevamo già parlato qui di alcune di queste proprietà dei CSS 3 con l'argomento del Design Responsive e delle Media Queries. Oltre a queste ce ne sono molte altre, ma in questo articolo prenderemo in esame in particolare gli effetti di transizione.

Per realizzare una transizione di uno sfondo in un div possiamo usare il seguente codice:

div {
  width: 300px;
  height: 300px;
  background-color: #fff; //colore 1
 
  transition-property: background-color;
  transition-duration: 3s;
}
div:hover {
  background-color: #000 //colore 2
}

Il div sarà un quadrato di 300px e quando vi saremo sopra con il puntatore del mouse avverrà il passaggio dal colore 1 al colore 2 con una transizione di 3 secondi, sfumando. Un ottimo effetto che si può sfruttare in molti siti web, anche per creare pulsanti particolari.
Per rendere compatibile questo codice con tutti i browser basta anteporre i prefissi -moz-, -webkit-, -o- alle 4 proprietà sotto elencate:
 
transition-duration // è il tempo che impiegherà la transizione
 
transition-property // definisce a quale proprietà viene assegnata la transizione, le proprietà sono qui
 
transition-delay // ritarda l'inizio della transizione, indicato in secondi
 
transition-timing-function // descrive come vengono calcolati i valori intermedi della transizione, cambia velocità in transizione
 
//i possibili valori del timing sono: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier

I CSS 3 sono compatibili solo con le versioni più moderne dei browsers (es. Internet Explorer 10+, Firefox 4.0+ ecc.) mentre le animazioni in Javascript sono compatibili con tutti i browsers, anche quelli più datati. Sicuramente sono più semplici da usare rispetto a Javascript, e inoltre hanno un'impiego perfetto per le animazioni 3D sui siti web. Quindi per concludere significa che ci sono pro e contro per l'uso dei CSS 3 rispetto a Javascript quindi sicuramente la soluzione migliore è usarli tutti e due. Sta al web developer capire quale tecnologia usare per i clienti in base alla loro richiesta.