fbpx

Aggiungi un pò di brio al sito web con le animazioni Css

Aggiungi un pò di brio al sito web con le animazioni Css

Le animazioni e le transizioni ti permettono di creare delle micro-interazioni che generano un feedback dagli utenti e rendono l’esperienza web più fluida e di generare un’ illusione di continuità tra interfaccia ed utente. Le animazioni sono importanti in tante situazioni, vediamo quali. Se c’è da aspettare più di 1 secondo nel caricamento della pagina sarebbe ideale avvisare gli utenti che qualcosa sta accandendo: è il classico “spinner” che indica che la pagina sta caricando, oppure si può mostrare lo stato futuro di un elemento se per esempio stai costruendo un elemento da prendere e trascinare (drag & drop), puoi animare “l’elemento futuro” per mostrare agli utenti dove posizionare l’elemento trascinato.
Inoltre l’occhio umano è attratto dal movimento delle cose; il nostro cervello nota e reagisce ad un movimento e questo è un vantaggio perché aiuta gli individui a riconoscere ciò che è dannoso e ad auto-proteggersi. Di conseguenza anche le animazioni all’interno di una pagina web attraggono l’attenzione dell’utente e questo è solo un vantaggio per i tuoi progetti.
Le animazioni possono trasformare una cosa insignificante in qualcosa di più importante come nel caso in cui un piccolo pulsante rosso che nel sito viene animato da un’animazione di tipo “battito” invitiando quindi l’utente a cliccare e a scoprire cosa c’è sotto.
Come fare a realizzare animazioni e transizioni che siano comprensibili ed utili ai nostri utenti?
Prima di tutto, ricordiamo la sintassi Css che serve per costruire transizioni ed animazioni. Con pratici esempi ti mostro come certe animazioni lavorano meglio di altre e come trovare la miglior durata e tempo per costruire un’animazione che sia adatta per l’utente del tuo sito web.

Sintassi delle Transizioni e Animazioni Css

Ricordiamo innanzitutto la differenza tra transizioni e animazioni.
Una transizione ti permette di cambiare una o più proprietà tra due stati differenti. Con le animazioni, puoi cambiare queste proprietà tra quanti stati tu vuoi. L’immagine sotto aiuta a capire la differenza.


Il classico esempio della transizione è quello di cambiare colore di sfondo di un pulsante da giallo a viola passando il mouse sul pulsante (stato hover). Quindi ci sono due stati, uno di default di partenza e l’altro “hover” al passaggio del mouse.
Vediamo la sintassi delle transizioni Css:
Per spiegari la sintassi utilizzeremo i nomi in inglese poichè nel foglio Css saranno quelli utilizzati per realizzare la transizione:

  1. transition-property: serve ad impostare le proprietà che vuoi cambiare;
  2. transition-duration: serve ad impostare quanto durerà la transizione;
  3. transition-timing-function: serve ad impostare la velocità di curva di un’animazione;
  4. transition-delay: serve a definire quanto tempo il browser deve aspettare prima di far cominciare la transizione;

La cosa più interessante è la possibilità di mixare le animazioni Css con Javascript. In tal caso prima costruisci l’animazione con i Css, poi aggiungi una “.classe” nel Css e dopodiché puoi aggiungere un evento aggiungendo la classe in Javascript: per esempio, clic, focus, blur, o un invio di form ecc; Un esempio è proprio quello del form. Se vuoi inviare un form senza inserire i dati, e clicchi il pulsante invio, aggiungendo la classe si può creare un’animazione che crea un tremolio con 3 animazioni che muovono il form da destra a sinistra e con Javascript puoi controllare se ci sono errori nel form. Quindi c’è la classe “.errore” al form che permette di far tremare tutto il form.
Per realizza un’animazione invece hai bisogno di impostare alcuni “keyframes” per creare step differenti al cambio dello stato. Dopo inserisci l’animazione agli elementi Css con o senza evento scatenante.
La sintassi è la seguente:

  1. animation-name: è il nome dell’animazione da inserire dopo nel Css;
  2. animation-duration: quanto durerà l’animazione;
  3. animation-timing: il tipo di curva dell’animazione;
  4. animation-iteration count: quante volte avverrà l’animazione;
  5. animation-direction: (normal,reverse,alternate, alternate-reverse): come sarà l’animazione durante ogni ciclo;
  6. animation-play-state: se è in corso o se è in pausa;
  7. animation-delay: quanto tempo ritarderà prima di cominciare;
  8. animation-fill-mode: (none, forward, backwards, both) serve a stabilire che stile dare una volta che l’animazione è finita;

Per capire meglio come funzionano i keyframes, puoi prendere spunto dalla app keyframe è un ottimo strumento per poter giocare con le animazioni.
Ottime risorse sono anche le seguenti:

https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations

Opacità e Trasformazione

Animare alcune proprietà può diventare pericoloso e pesante per il browser. Le due cose che il browser può animare facilmente sono “ trasformazione” e ” l’opacità” per cui per costruire animazioni performanti, ti consiglierei di usare queste ultime due. Animare il colore e il colore di sfondo è un po più difficile ma comunque sono altre due ottime possibilità da realizzare. Ecco le 4 possibili opzioni da usare con la trasformazione.

  1. Translations (transla) — transform: translate(): permette di modificare gli assi X,Y and Z in traslazione;
  2. Scale (scala)— transform: scale(): per ingrandire le cose o renderle più piccole e nasconderle sugli assi x,y,z. Il valore di default è scala (nessuno) per cui se metti scala(0), nasconderai l’elemento;
  3. Rotate (ruota)— transform: rotate(): per ruotare gli elementi sugli assi X,Y and Z usando i gradi;
  4. Skew (distorci)— transform: skew(): per distorcere cose e creare dei poligoni strani;

Come trovare l’animazione perfetta con la durata e il tempo ideale

La proprietà Timing function è quella che permette di creare delle animazioni carine per gli occhi degli utenti.
Ecco alcuni buoni consgili da tener presente:

  • Utilizza durate istantanee (<100ms) per dissolvenza e animazione colore;
  • Usa animazioni di breve durata (100ms – 300ms) per effetti semplici e cmq animazioni di piccole dimensioni. inoltre usable per elementi che hanno bisogno di feedback da parte degli utenti (touch, click, swipe, etc.)
  • Usa animazioni di lunga durata (> 300ms) per effetti più complessi e di animazione più lunga come le transizioni della pagina o il movimento di oggetti.
  • Mantieni le animazioni basse (> 500ms) per movimenti larghi elementi in background che portano umore. Nella figura sotto è realizzato un’ottimo schema di ciò che è stato detto in precedenza.

Il tempo può cambiare in base alla dimensione della finestra del browser. Per esempio negli orologi o screen limitati, la distanza per un elemento, che deve essere animato da un lato all’altro, è più piccola. In tal caso muovere elementi con le animazioni dovrebbe essere più veloce per questi dispositivi, altrimenti gli utenti devono aspettare molto. L’animazione dovrebbe essere almeno il 30% più corta rispetto ai computer.
Una volta realizzata l’animazione è importante testare la durata: con diversi tipi di utenti, diversi dispositivi, network ecc.

La funzione di timing function specifica quanto un’animazione Css avanza o progredisce oltre la durata di ogni ciclo. Il valore di default è “ease” e l’animzione comincia in modo lento, accelera nel mezzo, e rallenta alla fine. Il valore Step () può essere usato se hai bisogno di costruire degli step nell’animazione come per esempio in un’orologio o un contatore Css. Cliccando su questo link puoi vedere contemporaneamente come funzionano le diverse animazioni.

#1 Linear Timing Function

L’oggetto viaggia alla stessa distanza nello stesso momento. Questo fa si che l’animazione sia leggermente innaturale e meccanica. In alcuni casi potrebbe essere proprio quello che stai cercando come in questo esempio dove l’animazione è meccanica proprio per dare l’illusione del treno che va oltre l’immagine sotto al treno. Può anche essere utilizzata per elementi che non sono interessati da forza fisica, come per animazione e transizione di opacità e colore.

#2 Ease-in timing function

L’animazione inizia lenta e diventa più veloce fino alla fine del ciclo. Questo da l’impressione di qualcosa che accelera. Lavora bene con oggetti che volano al di là dello screen e che lo lasciano definitivamente. Per esempio quando l’utente rimuove una notifica.

#3 Ease-out timing function

L’animazione comincia veloce e finisce lenta fino alla fine del tempo. Funziona bene per gli elementi che emergono o arrivano sullo screen come le notifiche che appaiono sullo schermo oppure per elementi come le carte che appaiono da fuori lo schermo e scivolano nello schermo.

#4 Ease-in-out timing function

L’animazione comincia fuori lentamente e diventa veloce fino al punto medio della durata e di nuovo rallenta fino alla fine. Questo tipo di tempo è usato per oggetti che si muovono da una parte del video ad un’altra. È anche usata per elementi che scompaiono ma che l’utente può portare indietro nello stesso posto (menù). Lavora anche bene con i pulsanti ed elementi che richiedono reazione istantanea.

Creare la tua personale animazione con la curva di cubic-bezier

Infine puoi creare la tua curva personale con la curva di cubic-bezier. Ci sono degli strumenti online che possono aiutarti:

  •  cubic-bezier.com: puoi giocare creando la tua curva perfetta. o creare degli effetti di rimbalzo.
  • easings.net è una galleria di curve precostituite che puoi usare per i tuoi progetti.

Le animazioni possono essere utilizzate interessanti per distrarre gli utenti dai lenti caricamenti ma bisogna utilizzarle con ponderazione perchè possono essere anche elementi disturbanti come nel caso di orribili banner inseriti in alcuni siti web.

— SCARICA LA RISORSA “ANIMAZIONE E TRANSIZIONI” —

FONTE: Stephanie Walter

Per piacere seguici e metti mi piace:
Nessun Commento

Sorry, the comment form is closed at this time.

Social media & sharing icons powered by UltimatelySocial