Le transizioni con i css3 sono state introdotte in via sperimentale dal WebKit Team di Safari per poi fortunatamente confluire nelle specifiche CSS3 del W3C (allo stato attuale il documento che le descrive è in working draft). Le transizioni CSS permettono di effettuare cambiamenti su specifici parametri CSS applicando una durata e un andamento.
Purtroppo attualmente le transizioni CSS non sono pienamente compatibili con tutti i browser in commercio, quindi è possibile utilizzarle con profitto solo su:
- Safari e Chrome entrambi basati su webKit
- Opera (dalla versione 10.5 in poi)
- Firefox (dalla versione 4.0 in poi)
- Internet Explorer 9 (si spera…)
Tutti gli altri browser ignoreranno il comando e visualizzeranno solamente lo stato finale definito nella pseudo-classe :hover.
Di seguito riportiamo i principali comandi attraverso un esempio pratico:
In questo esercizio andiamo a creare tre semplici pulsanti, ad ognuno dei quali è applicata una transizione. Per prima cosa creiamo la struttura dei pulsanti:
<div class="btn button1">Premi qui!</div> <div class="btn button2">Premi qui!</div> <div class="btn button3">Premi qui!</div>
Poi effettuiamo il setup applicando gli stili basici:
.btn {
padding:10px 20px;
border:1px solid #000;
width:100px;
text-align:center;
text-transform:uppercase;
float:left;
margin-left:55px;
margin-right:55px;
margin-top:35px;
cursor:pointer;
-moz-border-radius: 15px;
border-radius: 15px;
color:#fff;
letter-spacing:1px;
font-size:1.3em;
}
.button1 {
background-color:#00F;
}
.button2 {
background-color:#FF8000;
}
.button3 {
background-color:#808000;
}
A questo punto si possono implementare le transizioni. Al fine di mantenere il codice coinciso utilizzeremo la notazione ridotta dove in un unico comando è possibile specificare contemporaneamente: la proprietà su cui effettuare la transizione, il tempo, l’andamento e il ritardo (tempo che intercorre fra l’evento scatenante e l’attivazione dell’animazione). Inoltre è possibile specificare, con il medesimo comando, più di un paramentro animato, separando la notazione con una virgola.
Riportiamo qui di seguito un esempio:
/* transizione di un singolo parametro */ transition:NOME-PARAMETRO TEMPO ANDAMENTO [RITARDO]; /* transizione di più parametri */ transition:NOME-PARAMETRO TEMPO ANDAMENTO [RITARDO], NOME-PARAMETRO TEMPO ANDAMENTO [RITARDO];
Di seguito riportiamo il codice completo relativo alle tre transizioni riportate nell’esempio:
.button1 {
-webkit-transition:background-color .4s linear .3s;
-moz-transition:background-color .4s linear .3s;
-o-transition:background-color .4s linear .3s;
transition:background-color .4s linear .3s;
}
.button1:hover {
background-color:#0CF;
}
.button2 {
-webkit-transition:padding .2s linear;
-moz-transition:padding .2s linear;
-o-transition:padding .2s linear;
transition:padding .2s linear;
}
.button2:hover {
padding:20px 20px;
}
.button3 {
-webkit-transition:padding .2s linear .5s, background-color .4s linear .5s;
-moz-transition:padding .2s linear .5s, background-color .4s linear .5s;
-o-transition:padding .2s linear .5s, background-color .4s linear .5s;
transition:padding .2s linear .5s, background-color .4s linear .5s;
}
.button3:hover {
padding:20px 20px;
background-color:#0CF;
}
I prefissi
Essendo ancora un documento in working draft i browser che hanno implementato le transizioni, lo hanno fatto utilizzando i prefissi per cui è necessario utilizzarli per fare in modo che il foglio stile sia correttamente interpretato da Safari e Chrome (-webkit-), Opera (-o-) e Firefox 4 (-moz-).
Nota: è preferibile inserire il comando privo di prefisso come ultimo comando in modo farlo prevalere nel momento in cui la versione definitive del comando sarà implementata.
L’andamento
Le transizione CSS3 forniscono sei possibili andamenti:
- ease
- ease-in
- ease-out
- ease-in-out
- linear
- cubic-bezier
Transizione su tutte le proprietà disponibili
E’ possibile effettuare la transizione su tutte le proprietà utilizzando il parametro “ALL”, in questo modo non è necessario ripetere ogni parametro da animare. Le transizioni precedenti quindi potrebbero essere riscritte in questo modo:
.button1 {
-webkit-transition:all .4s linear .3s;
-moz-transition:all .4s linear .3s;
-o-transition:all .4s linear .3s;
transition:all .4s linear .3s;
}
.button1:hover {
background-color:#0CF;
}
.button2 {
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
}
.button2:hover {
padding:20px 20px;
}
.button3 {
-webkit-transition:all .2s linear .5s;
-moz-transition:all .2s linear .5s;
-o-transition:all .2s linear .5s;
transition:all .2s linear .5s;
}
.button3:hover {
padding:20px 20px;
background-color:#0CF;
}
Transizioni CSS3 e creatività
Le transizioni sono indubbiamente uno strumento potente e versatile che si presta a molti utilizzi. Riportiamo di seguito un semplice esempio di cosa si può ottenere manipolando padding, posizioni e dimensione dei bordi:
In questo caso abbiamo inserito un div vuoto al quale abbiamo applicato un immagine di background.
<div id="container">
<div class="elemento"> </div>
</div>
Poi abbiamo impostato una transizione su tutti i parametri (all) di 0.6 secondi con andamento “ease”. Per il div abbiamo impostato due pseudo-classi: hover e active; ognuna delle quali agisce su diversi paramentri (padding, border-width, border-color, border-radius e posizionamento).
#container {
position:relative;
height:500px;
}
.elemento {
-moz-border-radius: 210px;
border-radius: 210px;
width:5px;
height:5px;
position:absolute;
top:230px;
left:400px;
cursor:pointer;
border:3px solid green;
background:url(../img/vegetable.gif) center no-repeat;
-webkit-transition:all .6s ease;
-moz-transition:all .6s ease;
-o-transition:all .6s ease;
transition:all .6s ease;
}
.elemento:hover {
padding:200px;
left:200px;
top:50px;
border-width:12px
}
.elemento:active {
padding:230px;
left:170px;
top:20px;
border-width:12px;
border-radius: 250px;
border-color:red;
}
In questo modo abbiamo ottenuto un doppio comportamento: quando l’utente passa col mouse sull’elemento questo si ingrandisce e visualizza l’immagine di sfondo, quando l’utente clicca sull’elemento questo si ingrandisce ulteriormente e il colore del bordo sfuma dal verde al rosso.
Approfondimenti
Se si desidera approfondire i fogli di stile di terzo livello esistono diverse risorse:
- CSS3 for Web Designers di Dan Cederholm: questo manualetto appartenente alla linea “A book Apart” ha riscosso un certo (meritato) successo nella comunità dei web designers. Pur essendo in inglese, la prosa chiara e i numerosi esempi (e il prezzo accessibile) lo rendono un ottimo acquisto. Nota: è disponibile sia la versione cartacea che l’e-book.
- CSS3 cosa c’è da sapere? e CSS3 creare animazioni su oggetti di Giulius Design: due post che forniscono una panoramica ricca di esempi sui CSS3
- Transizione con i css3 di trinacriaweb: un post piuttosto completo che approfondisce le transizioni e le possibili applicazioni
Lascia un commento