Animate.css - Libreria CSS3 per creare animazioni facilmente

I CSS sono migliorati con molte funzionalità che rendono lo sviluppo web molto più interessante e stimolante. Una di queste funzionalità è gli effetti di animazione CSS3 . Prima di CSS3, per creare un'animazione puoi lavorare solo con Javascript. Ma ora puoi crearlo facilmente con CSS3.

Ti abbiamo illustrato un buon tutorial sulla creazione di Bounce Effect con CSS3 in precedenza, e in questo post ti presenterò una fantastica libreria che renderà ancora più semplice la creazione di animazioni con CSS3: Animate.css .

Animate.css è una raccolta di libreria di effetti di animazione CSS3 pronta per l'uso. Questa libreria ti fornisce oltre 50 effetti di animazione diversi che funzionano in modo coerente sulla maggior parte dei browser con supporto CSS3.

È quindi possibile applicare l'animazione al testo, immagine, modulo e così via. Ci sono anche molti grandi siti che usano questa libreria; Tridiv - il miglior editor CSS 3D sul web - è uno di questi.

Iniziare

Con Animate.css, tutto ciò che devi fare è includere le classi appropriate con i tuoi elementi . Per iniziare, in primo luogo includere il file animate.css nella testa . È possibile scaricare la libreria completa dalla pagina del repository Github.

Per impostazione predefinita, Animate.css si animerà solo una volta al primo caricamento della pagina . Rimarrà quindi statico. Per essere in grado di controllare l'animazione, avremo bisogno di un piccolo Javascript. In questo caso, includeremo un jQuery nel progetto, in questo modo.

 ...  ... 

Markup HTML

Per applicare l'animazione devi aggiungere .animated classe .animated all'elemento che vuoi animare, insieme al nome dell'animazione in questo modo.

 Questo testo si animerà. 

Questo è tutto! L'animazione verrà implementata solo al caricamento della pagina, quindi potrebbe essere necessario utilizzare Javascript per applicare l'animazione al trigger di un evento. L' .option può anche essere personalizzata in base alle tue esigenze.

Opzioni CSS aggiuntive

L'animazione che abbiamo definito in precedenza effettuerà un ciclo solo una volta e su una durata e un tempo di ritardo predefiniti. Se hai bisogno di più loop o una durata o un ritardo diverso, ecco come personalizzare questo.

Per consentire al loop dell'animazione più volte o persino all'infinito, è possibile utilizzare l'attributo di animation-iteration-count . Assicurati di includere anche i prefissi dei fornitori applicabili come webkit, moz, ecc. Per renderlo infinito, aggiungi infinite come valore.

Se ne hai bisogno per il loop solo più volte, inserisci il valore con il numero di loop che vuoi.

 -vendor-animation-iteration-count: infinito |  ; 

Per personalizzare la durata, l'attributo appropriato da utilizzare è la animation-duration ; ed è il animation-delay di animation-delay per il controllo del ritardo. Quello che segue è un codice di opzione di esempio.

 .option {-webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; } 

Controllo Javascript

Per un maggiore controllo sullo stato dell'animazione, abbiamo bisogno di un piccolo aiuto da Javascript. Diciamo che vogliamo un collegamento testuale per attivare un'animazione su un clic. In primo luogo, dobbiamo aggiungere un riferimento nel collegamento, in questo modo.

Questo testo si animerà.

Per utilizzare la funzione click, includere il riferimento del collegamento in esso.

Con Javascript, puoi definire il nome dell'animazione. Useremo un approccio creando una funzione animate e assegnando un nome all'animazione insieme alla classe dell'elemento (nel codice precedente abbiamo aggiunto l'attributo demo ).

E il codice Javascript gradirà quanto segue.

L'effetto di animazione, infatti, è uno dei modi migliori per rendere il tuo sito più attraente, ma ricorda di non esagerare.

10 app Web realizzate con Backbone.js [Case Study]

Sei mai stato impigliato nel codice degli spaghetti? Preferiresti alimentare la tua app qualcosa di più sano? Se è così, dai un'occhiata a cosa può essere realizzato con Backbone.js. Backbone è una libreria JavaScript che si basa liberamente sul modello di progettazione Model-View-Controller, ma poiché manca l'elemento Controller, è meglio chiamarlo framework MV *.Ti aiu

(Consigli tecnici e di design)

Sviluppatori: perché non si dovrebbe saltare la documentazione

Nel campo dello sviluppo di app mobili, app Web, app desktop o librerie JavaScript, la documentazione svolge un ruolo importante che potrebbe determinare il successo dello sviluppo del software. Ma se hai mai fatto documentazione, saresti d'accordo con me sul fatto che è praticamente la cosa meno gradita da fare per gli sviluppatori.

(Consigli tecnici e di design)