Nello sviluppo di un’interfaccia, sia essa progettata per una web app o per un sito web, le animazioni CSS3 stanno diventando uno degli ingredienti fondamentali. Grazie ad esse è possibile creare una user experience più gradevole e inevitabilmente un risultato finale di maggiore qualità (es.: la web page della mia nuova applicazione per iOS7: Tint).

Tuttavia usare stili CSS per creare delle animazioni non è sempre facile, soprattuto se si parla di importanti fattori come performance e compatibilità tra browser.

Combinare animation e transition (accompagnati dai relativi prefissi per i vari browser come -webkit-, -moz-, -ms- , -o-) con degli attributi sbagliati (affronteremo anche questo argomento in uno dei prossimi articoli) può infatti portare a problemi di sfarfallio, scatti e, soprattuto nel caso di dispositivi mobili o di effetti che prevedono lo spostamento ed il rendering di numerosi elementi DOM, ad un crash della nostra applicazione/sito web.

Dall’altro lato, l’operazione di scrittura di fogli per animazioni ed effetti in modo corretto può portare via diverse ore del nostro prezioso tempo.

In questo post voglio parlarti di animate.css, un’interessante raccolta di animazioni CSS3 cross-browser (ovviamente per browser ci si riferisce a quelli moderni), molto utile se si vuole realizzare effetti di svariato genere.

La libreria, un progetto di Daniel Eden, è stata creata al fine di far risparmiare del tempo a coloro che (come me) usano costantemente gli stessi tipi di animazioni, evitando l’inutile spreco di quel tempo che altrimenti sarebbe impiegato per organizzare i keyframes degli effetti di cui abbiamo bisogno.

Servendoci di animate.css avremo a disposizione tutti i tipi di animazioni più comuni come shake, bounce, swing, rotate e molti altri combinati tra loro, molto utili per implementare nei nostri lavori oggetti come modal, alerts, transizioni tra pagine ecc..

Dal sito web è possibile sia scaricare l’intero pacchetto che crearne uno personalizzato in base alle nostre esigenze, solo con gli effetti che vogliamo includere nel documento.

Ogni animazione è stata scritta in modo tale da poter essere eseguita su tutti i browser moderni come safari, mozilla, opera ed IE 10+ (per maggiori dettagli consulta questa tabella sulla compatibilità delle animazioni CSS3).

 

Ora potrai concentrati più su quali effetti scegliere per la tua interfaccia che sulla loro stessa creazione, buon divertimento!