10 strumenti di animazione CSS3 da segnalare

Poiché le persone tendono a percepire più facilmente le cose che si muovono, le animazioni utilizzate in modo intelligente possono migliorare l'esperienza utente di un sito richiamando l'attenzione su elementi importanti che gli utenti devono notare rapidamente.

CSS3 ha introdotto una nuova sintassi di animazione che può aiutarti a ottenere molte cose interessanti nei tuoi progetti. Costruire animazioni fantastiche a volte può essere complicato e richiede molto tempo, in questo caso le librerie ei generatori di animaiton possono essere utilizzati in modo eccellente.

Guarda alcune delle animazioni rese possibili con i CSS:

• 38 Inspiranti demo di animazione CSS3
• 15 bellissimi effetti di testo creati con CSS
• 30 fantastiche animazioni CSS che devi vedere
• Come creare l'effetto bounce con l'animazione CSS3

In questo post daremo un'occhiata a 10 strumenti brillanti che possono rendere più semplice e veloce la creazione di animazioni personali.

1. Generatore di animazioni CSS3Gen CSS3

CSS3Gen ti fornisce un generatore di animazioni di facile utilizzo che ti consente di generare rapidamente animazioni di base. Anche se con questo strumento non creerai complicate opere d'arte, sarà una buona scelta se vuoi creare un'animazione standard senza troppi problemi.

tu non devi sporcarti le mani con il codice, poiché è possibile impostare le proprietà su un modulo, visualizzare in anteprima il risultato, quindi semplicemente copiare e incollare il codice nel proprio file CSS.

2. Animazione CSS

Se tu bisogno di animazioni più complicate, Puoi trovare CSS Animate utile. Ha un'interfaccia utente più matura, puoi impostare un po 'più di proprietà e puoi seguire, fermare e riavviare l'animazione con l'aiuto di una timeline intuitiva.

Ci sono anche esempi di animazioni, come ad esempio “Rimbalzo”, “Agitare”, e “Swing”, che è possibile caricare nel generatore e modificare il codice in base alle proprie esigenze.

3. Coveloping CSS Animation Generator

CovelopingIl generatore di animazione è probabilmente la scelta migliore se sei nuovo con le animazioni CSS3, e vogliono capire rapidamente come funzionano. Questo semplice ma potente strumento ti permette di testare i diversi tipi di animazioni offerte da CSS3 e di verificare facilmente qual è la differenza tra loro.

Devi solo impostare 4 parametri: tipo di animazione, funzione di animazione, durata in secondi e se l'animazione è infinita. Quando sei pronto, devi solo prendere e prendere il codice HTML e CSS generato.

4. Animazioni magiche

Animazioni magiche è una fantastica libreria CSS che rende possibile posiziona facilmente le animazioni con effetti speciali sul tuo sito. Ad esempio puoi rendere gli elementi svanire dentro e fuori, aprire a sinistra oa destra, quindi tornare indietro, ruotare verso il basso, su, a sinistra oa destra e molti altri

Tutto quello che devi fare è scaricare il codice, includere il file CSS nella tua pagina HTML e aggiungere la classe appropriata con l'aiuto di jQuery nel seguente modo:

 $ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn'););

Puoi anche modificare le impostazioni del timer e rendere l'animazione infinita con l'aiuto di jQuery (per maggiori dettagli vedi il file readme).

5. Animate.css

Animate.css ti fornisce un set di fantastiche animazioni CSS3 cross-browser. Le animazioni sono divise in gruppi come Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances e molti altri, quindi non puoi lamentarti di una mancanza di scelta.

Puoi scaricare il codice da Github, quindi devi solo aggiungere il file CSS alla tua pagina HTML e le relative classi CSS agli elementi HTML che desideri animare.

6. Bounce.js

Bounce.js è una comoda libreria JavaScript che ti permette di creare animazioni complicate. Bounce.js ha un'interfaccia utente matura che ti permette di aggiungere diversi componenti - come l'alleggerimento, la durata, il ritardo e il numero di rimbalzi - manualmente all'animazione, o selezionare un preset pronto all'uso, quindi riprodurre l'animazione, e mettere a punto le proprietà se è necessario.

7. AniJS

anijs è una libreria JavaScript supercool che ti consente di aggiungere animazioni CSS3 ai tuoi progetti e a costruire sofisticati componenti dell'interfaccia utente come le schede animate, le fisarmoniche, le modali, i menu scorrevoli, le notifiche delle app per dispositivi mobili, le rivelazioni a scorrimento e molto altro.

Funziona con tutti i browser moderni incluso iOS e Android, non ha bisogno di librerie di terze parti e ha una spettacolare vetrina chiamata AniCollection dove puoi facilmente sperimentare con i diversi effetti forniti dalla libreria.

8. Spinners CSS per elementi singoli

Hai mai desiderato di migliorare i tuoi disegni con filatori animati di caricamento? Se la risposta è sì, questa graziosa libreria di filatori CSS può essere una scelta eccellente per te. Il codice CSS per i filatori è scritto in LESS. Non ci sono impostazioni, il codice è pronto, devi solo inserirlo nei tuoi file HTML e CSS.

9. Contachilometri

Odometro è uno strumento geniale per posiziona fantastici metri animati sul tuo sito. È una libreria CSS e JavaScript, la parte CSS è scritta in Sass e puoi scegliere tra diversi temi come “Digitale”, “Stazione ferroviaria”, e “Auto”.

Per usare Contachilometri, devi aggiungere il file JavaScript e il file del tema scelto alla tua pagina HTML, quindi il class = "contachilometri" selettore per l'elemento che si desidera creare in un misuratore animato. Scelta ideale per rappresentare visivamente i dati o per fare un “Prossimamente” pagina più accattivante.

10. Snabbt.js

Snabbt.js è una libreria di animazione minimalista che ti aiuta a muovere facilmente le cose. Se hai bisogno di un po 'di ispirazione, dai un'occhiata alle demo per vedere cosa puoi ottenere con questo strumento di animazione intelligente, la tavola periodica animata sullo screenshot qui sotto è solo una delle tante possibilità che Snabbt.js rende facile da implementare.

Devi scrivere un piccolo JavaScript se vuoi usare questa libreria, ma il risultato è piuttosto spettacolare, quindi probabilmente vale la pena.