Animate.css: raccolta di stili per animazioni CSS3 cross browser

novembre 11, 2013
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest0Share on Google+0

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.

logo_upCreative

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!

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

  • Pingback: Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript | upCreative()

  • Pingback: HTML Mobile App: animazione CSS3 su pagine di una lista | Laboratorio CSS()

  • mirko vissa

    ciao, interessante l’articolo… ho provato ad applicare le animazioni a delle pagine che avevo fatto, l’unica cosa è che non so come far partire le animazioni al momento che le si visualizza, ciè le animazioni iniziano al caricamento della pagina quindi se un elemento è molto in giù nella pagina si anima all’inizio e poi è già fermo quando ci si arriva,non so se mi sono spiegato bene… sono alle prime armi sicuramente sarà una sciocchezza…sapresti aiutarmi?
    ciao e buon lavoro!

    • Giacomo Freddi

      Ciao Mirko, grazie per il commento!

      Quello che dovresti fare è aggiungere tramite Javascript (jquery alla grande ;) ) la classe dell’animazione all’elemento HTML, esattamente nel momento un cui vuoi dare il via all’animazione.

      Fammi sapere come va! ;)

      Giacomo