CSS3 Transition: Sfruttiamole Appieno

Il tutto risiede in una nuova caratteristica che è stata recentemente introdotta con l’aggiornamento del linguaggio utilizzato per i nostri fogli di stile, in particolar modo le transition. Quest’ultime non sono altro che piccole animazioni che potremmo utilizzare nativamente all’interno dei nostri progetti per fare in modo che certe proprietà di un determinato elemento possano venir modificate dolcemente lungo un arco di tempo da noi specificato.

Magari vi state chiedendo “Ma perché dovrei imparare qualcosa del genere visto che ho jQuery che mi permette di fare questo con una semplice linea di codice???”. La risposta corretta a questa domanda è che noi non dobbiamo assolutamente imparare questa nuova tecnica, ma piuttosto possiamo apprendere qualcosa di nuovo che ci permetterà di aggiungere delle animazioni ai nostri progetti senza confidare nell’esecuzione di un linguaggio esterno (ci ricordiamo che se sul sistema del nostro visitatore non è installato JavaScript allora tutte le nostre animazioni non saranno visibili vero?).

CSS3 Transition: Cosa Sono

Come ci spiega la stessa W3C:

Le CSS3 Transition permettono di modificare le proprietà CSS durante un arco di tempo specificato. Queste leggere animazioni possono essere attivate quando un visitatore posiziona il cursore del proprio mouse sopra ad un oggetto (lo stato hover), quando lo clicca (stato active) oppure quando viene semplicemente selezionato (stato focus).

Sembra abbastanza chiaro il concetto no? Mi creo un bel bottone con i CSS, imposto delle nuove proprietà e quando questo viene toccato dal cursore cambierò queste proprietà durante un arco di tempo, niente di più semplice! Ma come faccio ad utilizzarle?

La struttura

Come molte altre proprietà CSS possiamo impostarle le transition con due metodi, c’è la versione completa e quella ridotta. Per un pieno apprendimento di questa proprietà andremo ad analizzare dapprima quella completa per imparare al meglio i vari valori che essa accetta, per poi passare ad utilizzare quella ridotta per ridurre il peso dei nostri CSS!

Per mantenere questo articolo il più conciso possibile ho optato per ignorare la presenza dei vendor prefix, ma vi consiglio caldamente di utilizzarli per aumentare le possibilità che i vostri effetti siano compatibili con il maggior numero di browser, alla fine con LESS.js diventa un gioco da ragazzi! Passiamo adesso ad analizzare le varie proprietà che abbiamo appena introdotto:

• transition-property – questo specifica la proprietà che dovremo andare ad animare, è possibile animare una singola proprietà (come il font-size nel nostro esempio) ma anche tutte quelle proprietà che denvono modificate da uno stato ad un altro;
• transition-duration – ci permette di specificare quanto tempo deve impiegare per applicare il cambio di regole;
• transition-timing-function – ci permette di specificare se l’animazione dovrà avere delle accelerazioni o decelerazioni nell’arco del tempo impostato.

Tutto abbastanza semplice non è vero? Bene prima di continuare lasciatemi specificare la stessa proprietà ma nella sua versione ridotta:

Proprio come succede per le altre proprietà la forma ridotta racchiude tutte le tre presentate precedentemente nell’ordine proprietà – tempo – accelerazione/decelerazione.

Comprendere la transition-timing-function

Definire come una animazione si deve comportare nel tempo può rivelarsi un compito veramente arduo, ma per fortuna esistono diverse impostazioni di base che possono aiutare tutti noi fornendoci qualcosa di default con cui lavorare; ma perché dico che è una cosa difficile? Bene perché questo tipo di velocità si comporta in moltissimi modi differenti, possiamo decidere che nell’arco di tempo impostato la nostra animazione parta velocemente per poi raggiungere il punto finale rallentando gradualmente, possiamo dirgli di fare l’opposto, possiamo anche dirgli di partire veloce, rallentare a metà per poi riprendere la velocità iniziale! Tutte queste impostazioni saranno da noi modificabili se il concetto di Curva di Bézier è ben chiaro nelle nostre menti, ma se siete come me la cosa diventa leggermente più complicata…

Curva di Béizer per animazione ease-in-out

Prima di andare a prendere i nostri libri di geometria e andare a ripassare il significato della Curva di Béizer voglio subito farvi rilassare comunicandovi che a giro per la rete esistono diversi strumenti che vi permetteranno di creare le vostre animazioni nel modo più semplice possibile, quello visuale! Lo strumento scelto per questa puntata prende il nome di CSS Cubic Béizer Builder e vi permetterà di sperimentare con mano quali effetti di accelerazione e decelerazione potremo inserire all’interno dei nostri progetti.

Se invece desideriamo utilizzare qualcosa di più comune potremo sempre appoggiarci a dei valori preimpostati che sarenno a nostra disposizione utilizzando semplicemente una parola chiave:

• ease – l’animazione parte veloce per terminare dolcemente, si ottiene anche specificando il valore come cubic-bezier(0.25, 0.1, 0.25, 1.0);
• linear – l’animazione avviene in modo lineare, ottenibile anche con cubic-bezier(0.0, 0.0, 1.0, 1.0);
• ease-in – l’animazione parte piano per velocizzarsi sul finale, ottenibile anche con cubic-bezier(0.42, 0, 1.0, 1.0);
• ease-out – l’opposto dell’animazione precedente ovvero parte velocemente per poi fermarsi con un rallentamento, ottenibile anche con cubic-bezier(0, 0, 0.58, 1.0);
• ease-in-out – un miscuglio delle ultime due animazioni ovvero parte piano, acquista velocità nel mezzo, per poi terminare dolcemente, si ottiene anche con cubic-bezier(0.42, 0, 0.58, 1.0).

Ovviamente saremo liberi di utilizzare la forma che preferiamo, alla fine saremo noi a decidere le nostre animazioni no?!?

Transition in Azione

Adesso che abbiamo conosciuto a fondo il funzionamento delle CSS3 Transition possiamo anche iniziare a fare qualche esperimento! Partiamo come sempre da un semplicissimo markup HTML di base, creiamo un box tramite un div ed inseriamo un pò di testo al suo interno:

Adesso che abbiamo il nostro HTML possiamo anche passare a impostare quale regola per creare la nostra box:

Eccoci pronti! In questo esempio abbiamo dapprima impostato alcune regole di stile per dare una forma e dei margini al nostro elemento, successivamente abbiamo dichiarato che lo stesso elemento deve essere pronto ad applicare una transazione riguardante tutte (all) le proprietà che verranno modificate? Già ma quali proprietà verranno modificate, e come?

Questo sta soltanto a noi a deciderlo! Possiamo cambiare praticamente qualsiasi proprietà, fatta eccezione della proprietà display, e possiamo decidere di farla partire grazie ad una delle pseudo-classi presentate ad inizio articolo (:hover, :active o :focus). Quindi a questo punto se inserite qualcosa come:

Potrete vedere che il vostro quadrato cambia colore e forma quando posizionare il vostro cursore sopra di esso.

L’effetto realizzato.

Una cosa che ci farà molto comodo sapere è quella che siamo in grado di impostare dei tempi diversi per le varie animazioni e fare in modo di costruire delle animazioni veramente accattivanti! Provate adesso a modificare le regole di transizioni come segue:

Come possiamo vedere grazie a questa piccola modifica siamo riusciti a creare una animazione veramente accattivante visto che per ogni proprietà siamo in grado di impostare un tempo ed una animazione differente, il nostro limite è la nostra fantasia!

Lasciatemi lo spazio per illustrarvi un ultima proprietà che potrebbe sempre tornarvi utile, ovvero la possibilità di poter aggiungere un ritardo nell’avvio della animazione, quindi potremmo decidere che l’utente deve passare 0.5 secondi con il mouse sopra il nostro bottone, o qualsiasi altro elemento, prima che l’animazione parta! Grazie alla proprietà transition-delay è possibile fare anche questo e potremo utilizzarla come proprietà a sé stante (dichiarandola come specificato) oppure aggiungendo un quarto parametro alla nostra proprietà transition, a voi la scelta!

Conclusioni

Adesso che sappiamo come funzionano le CSS Transition sappiamo come aggiungere quel brio ai nostri progetti che fino a qualche anno fa avrebbe richiesto l’utilizzo di JavaScript, ma c’è ancora molto altro da scoprire dietro ai CSS3! Come abbiamo visto le transizioni permettono ad un elemento di passare da uno stato ad un altro tramite alcuni trigger (eventi che permettono l’inizio dell’animazione) ma non sarebbe ancora meglio se il nostro elemento potesse attraversare diversi stati e avviare la propria animazione senza la necessità di avere un input da parte dell’utente?

Anche per questa nuova sfida la soluzione si chiama CSS3! E più nello specifico prendono il nome di Animazioni CSS3, ma questo è l’argomento un altro articolo…

Tags: transition