Come creare animazioni con le CSS Transitions?
Nell’articolo precedente abbiamo parlato dei CSS3 Transforms, come modo per modificare gli elementi della pagina. Oggi facciamo il primo passo verso la realizzazione di animazioni con CSS3 studiando il primo dei moduli che consentono di animare gli elementi: le CSS Transitions
Nella specifica CSS2 nei passaggi di stato non sono previsti stadi intermedi: una volta applicato l’hover, ad esempio, un elemento passa da uno stato all’altro immediatamente. I CSS3 forniscono un mezzo per modificare questo comportamento tramite il modulo Transitions
Stando alla definizione del W3C: Le CSS Transitions consentono una variazione regolare dei valori delle proprietà CSS durante un intervallo di tempo definito. Questo significa che è possibile passare da un valore all’altro non più tramite un salto istantaneo, ma definendo una transizione dallo stato iniziale a quello finale. Proviamo a fare un esempio e poi analizzeremo tutte le proprietà delle Transitions.
Un esempio: animare un link
Un effetto molto utilizzato nello sviluppo dei siti web è quello dell’hover sui link per segnalare all’utente che si tratta di un elemento attivo. Ad esempio si potrebbe avere qualcosa del genere:
<a href="#" class="yiw">Hover me!</a>
a.yiw { background-color: #69C; padding: 5px 10px; } a.yiw:hover { background-color: #036; }
In questo esempio abbiamo creato un link con sfondo azzurro, che all’hover diventa immediatamente blu scuro, come puoi vedere:
Proviamo ad aggiungere una transizione per rendere l’effetto più dolce:
a.yiw { background-color: #69C; padding: 5px 10px; transition-property: background-color; transition-duration: 0.4s; transition-timing-function: ease; } a.yiw:hover { background-color: #036; }
Grazie a queste semplici dichiarazioni abbiamo specificato che la proprietà background-color
, con valore iniziale #69C
deve essere animata e che l’animazione deve durare 2 secondi. L’evento scatenante l’animazione è l’hover, mentre il valore finale della proprietà animata è #036
. Il risultato è il seguente e sicuramente più gradevole rispetto al semplice hover.
Vediamo ora in dettaglio quali sono le varie proprietà delle Transition.
transition-property
Questa proprietà specifica quale proprietà (scusa il gioco di parole) dell’elemento deve essere animata. La sintassi è la seguente:
#elem { transition-property: valore; }
dove valore
può essere all (indicando che tutte le possibili proprietà devono essere animate), none (l’opposto del precedente) oppure un elenco di proprietà CSS da animare, ad esempio:
#box { width: 200px; transition-property: width; } #box:hover { width: 700px; }
In questo codice abbiamo impostato la dimensione del div a 200px e specificato che dovrà essere animata. Muovendo il mouse sul div
vedrai che questo si comporta come se non fosse stata specificata nessuna transizione: questo perché la durata di default di un’animazione è 0s.
transition-duration
Questa proprietà stabilisce quanto deve durare l’animazione dal momento in cui viene scatenata. La sintassi è:
#elem { transition-duration: tempo; }
La durata può essere espressa in secondi (s) o millisecondi (ms) per un controllo più fine. Specificando 0 si ottiene un effetto identico all’hover.
#box { width: 200px; transition-property: width; transition-duration: 0.4s; } #box:hover { width: 700px; }
transition-delay
Puoi ritardare la partenza di una transizione specificando questa proprietà. In questo modo è possibile avere delle transizioni posticipate di un tempo definito dopo l’attivazione:
#elem { transition-delay: tempo; }
Se ad esempio volessimo far partire la nostra animazione un quarto di secondo dopo l’evento scatenante, potremmo scrivere:
#box { width: 200px; transition-property: width; transition-duration: 0.4s; transition-delay: 0.25s; } #box:hover { width: 700px; }
transition-timing-function
Questa proprietà permette di controllare il modo in cui l’elemento soggetto a transizione viene animato, modificando la velocità in vari punti dell’animazione. Le specifiche forniscono cinque modalità predefinite (ease
, linear
, ease-in
, ease-out
, ease-in-out
), più la possibilità di creare delle funzioni personalizzate (cubic-bezier
).
#elem { transition-timing-function: funzione; }
Ogni funzione interviene sulla velocità dell’animazione, simulando un comportamento più o meno reale: ad esempio la funzione linear
fissa una velocità costante per tutta la durata dell’animazione, mentre ease-in-out
parte lentamente, accelera nel mezzo e rallenta alla fine. Il mio consiglio è quello di provare i vari tipi di animazione (magari aumentando la durata, così da rendere l’effetto più evidente) e decidere quello che meglio si adatta al tuo lavoro.
#box { width: 200px; transition-property: width; transition-duration: 0.4s; transition-delay: 0.25s; transition-timing-function: ease-in-out; } #box:hover { width: 700px; }
CSS Transition: shortand notation
Come per tutte le proprietà CSS, anche le Transition permettono di utilizzare la shortand notation, che ci permette di abbreviare i nostri fogli di stile. La sintassi è la seguente:
#elem { transition: proprietà durata timing-function ritardo; }
Quindi le regole dell’esempio precedente verrebbero compattate tutte in un’unica dichiarazione:
#box { width: 200px; transition: width 0.4s ease-in-out 0.25s; }
Putroppo però non tutti i browser riconoscono la regola standard per le CSS Transition, quindi per avere il maggior supporto possibile è necessario inserire anche le regole con i prefissi proprietari:
#box { width: 200px; -webkit-transition: width 0.4s ease-in-out 0.25s; -moz-transition: width 0.4s ease-in-out 0.25s; -o-transition: width 0.4s ease-in-out 0.25s; -ms-transition: width 0.4s ease-in-out 0.25s; transition: width 0.4s ease-in-out 0.25s; }
Nota che la regola standard è l’ultima nell’elenco: questo, associato al fatto che i CSS tengono conto solo dell’ultima regola scritta, consente ai browser che supportano lo standard di utilizzare quest’ultima.
Animazioni multiple
Nell’esempio creato finora abbiamo cambiato la larghezza del nostro #box
sfruttando le CSS Transition per rendere l’animazione fluida. E se volessimo animare più proprietà contemporaneamente? Ovviamente la specifica ci viene in aiuto: è possibile animare più proprietà semplicemente elencandole una dopo l’altra nella regola transition
, separandole con delle virgole. Ad esempio, se volessimo animare la dimensione del #box
e contemporaneamente modificare il colore di sfondo avremmo qualcosa del genere:
#box { width: 200px; height: 200px; background-color: #F00; transition: background-color 0.4s ease-in-out, width 0.4s ease-in-out 0.25s; } #box:hover { background-color: #0F0; width: 500px; }
Come puoi notare, le due transition sono completamente indipendenti, possiamo specificare la durata, la timing function, il ritardo senza che le caratteristiche dell’una influenzino l’altra. Se per caso volessimo che tutte le animazioni avessere le stesse proprietà potremmo utilizzare la parola chiave all
, ottenendo:
#box { width: 200px; height: 200px; background-color: #F00; transition:all 0.4s ease-in-out; } #box:hover { background-color: #0F0; width: 500px; }
Eventi scatenanti: come far attivare le Transition?
Finora abbiamo utilizzato solo lo stato hover per attivare le Transition, ma ovviamente non è l’unico modo.
Oltre ad :hover
, puoi utilizzare ad esempio :focus
, per attivare le Transition sui link oppure sugli elementi dei form. Ma il concetto fondamentale da capire è che qualsiasi modifica alle proprietà specificate in transition, attiverà l’animazione. Questo include anche modifiche realizzate tramite JavaScript: quindi invece di realizzare l’animazione utilizzando JavaScript possiamo semplicemente modificare una proprietà CSS o aggiungere una classe e il browser si prenderà carico di animare l’elemento interessato.
Conclusioni
Le CSS Transition sono uno strumento potente e flessibile per realizzare delle piccole animazioni da utilizzare nei nostri lavori. L’importante, come per tutte gli strumenti, è sapere quando utilizzarle, ma soprattutto quando non utilizzarle. Infatti è facile lasciarsi prendere la mano e applicare transizioni ad ogni elemento, facendo perdere il senso di quello che dovrebbe essere un modo per esaltare solo alcune parti del contenuto.
Tu hai già utilizzato le CSS Transiton? Hai in mente qualche possibile utilizzo?
13 commenti
Trackback e pingback
-
CSS Transition e Transform: come posso utilizzarle? | Your Inspiration Web
[...] precedenti articoli abbiamo visto le basi delle CSS Transforms e Transition. Ma come utilizzare questi [...] -
CSS3: ATTIVARE LE TRANSIZIONI CON JQUERY | Your Inspiration Web
[…] In questo articolo vi illustrerò in che modo attivare le transizioni CSS tramite un piccolissimo codice Jquery. Come tutti…
Ciao Giustino,
complimenti l’articolo è chiaro e da un buon punto di partenza.
Recentemente anche io ho approfondito l’uso di CSS3 Transition ed Animation.
Se qualcuno fosse interessato a qualche altro caso di applicazione può trovare il risultato su http://css3-magic.brunoscopelliti.com
Grazie mille Bruno, e complimenti a te per l’esaustività della tua analisi sulle transitions.
L’ho messa tra i preferiti ;)
Sto notando però che non va neanche su IE9
Bellissimo articolo,
sarebbe bello ricevere qualche informazione sulla compatibilità con altri browser, e se esiste qualche metodo per far funzionare le funzioni transition anche su explorer :)
ottima guida! però io sto provando ad applicare questa proprietà transition a un’immagine che è contenuta in una tabella. ma non funziona. come posso fare?
CSS:
img.transition
{
width:484;
transition-property: width;
transition-duration:0.4s;
}
img.transition:hover
{
width:684;
}
HTML:
I css sono spettacolari!!!!!!
Bisogna perà stare attenti alle compatibilità. Ci sono così tanti browsers e disposiivi diversi che la compatibilità supera di gran lunga l’importanza grafica…purtroppo!
Enrico Tamburini
Ciao, volevo chiederti se possibile come fare in modo che quando clicco per attivare l’animazione oltre a concludersi l’effetto compare una scritta che prima non ci stava…grazie
Ma non era meglio flash, ti installavi il plug in e stavi a posto.
@Aniello: le animazioni in Css3, oppure in Js / jQuery hanno soppiantato Flash appunto perché non necessitano di nessun plugin e sono cross-device (ma ahimè, non ancora tutte cross-browser).
Grazie tante Giustino per l’articolo.
Mi è stato utilissimo per capire le base del funzionamento delle CSS transitions!
È interessante anche l’uso degli Sprite per creare animazioni sfruttando background-position!
Articolo molto interessante e tecnicamente molto valido, fornisce un esempio base ma allo stesso tempo completo delle possibilità di usare CSS3 per le animazioni.
E’ un articolo del 2013 ma adesso a fine 2015 è assolutamente attuale.
Come ogni tecnologia nel campo web fa subito brillare gli occhi agli sviluppatori per le strabilianti possibilità, ma poi ci vogliono anni per via dei problemi di compatibilità. Solo oggi finalmente fa parte della “cultura” avere un browser aggiornato sempre. Tutti i browser si aggiornano da soli, compreso internet Explorer (che per dare dei dati ho letto lo faccia a partire dall’ inizio 2012).
Sviluppare nel 2011 voleva ancora dire tenere conto di internet Explorer 7, a volte addirittura il 6, seppure vecchi quasi di 10 anni, proprio perché non esisteva una vera politica di aggiornamento dei browser negli anni precedenti.
Oggi per fortuna non è così, cosa molto importante per gli sviluppatori, tuttavia ad esempio le CSS3 animations,
sono state implementate senza usare i classici prefissi -webkit etcetc solo da pochissime settimane.
A mio parere è il momento di iniziare ad usare le animazioni CSS3, come sistema sono idealmente corrette,
a dispetto del javascript, che invece va ad “alterare il codice” in tempo reale, piuttosto che dare direttamente una istruzione al browser da eseguire.
Bisognerà vedere sulle animazioni complesse come sarà la fluidità sui vari browser non ultimo Edge12 su W.10,
se migliore nel caso di CSS animations o jquery.