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 fantastici quaderni che puoi acquistare

Le app per appunti digitali non funzionano per tutti quando si tratta di organizzare la propria routine quotidiana. Per alcune persone troppi segnali acustici, avvisi e notifiche creano distrazione e, quindi, si sentono più a proprio agio nell'usare un notebook o un pianificatore per scrivere effettivamente i loro appunti e le liste di cose da fare.

(Consigli tecnici e di design)

Errori di comunicazione: stai facendo questi 3 errori di marketing?

Hai mai provato ad avere una conversazione con qualcuno con cui non condividi una lingua comune? Può essere divertente, nelle giuste circostanze (i gesti delle mani sono un grande rompighiaccio), ma se nessuno di voi ha le parole per esprimersi adeguatamente, può rapidamente diventare frustrante.I designer freelance sono noti per inviare messaggi misti a potenziali clienti - o vogliono raggiungere un pubblico troppo ampio, o semplicemente non hanno studiato abbastanza il loro mercato per sapere cosa vogliono sentire i loro clienti ideali.I

(Consigli tecnici e di design)