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.

Trova lavori di codifica che corrispondono al tuo stack tecnico con questo sito

Il tipico stack PHP / MySQL non è più l'unica opzione per gli sviluppatori web. Le nuove tecnologie come i database Node, React e NoSQL come Mongo hanno cambiato radicalmente il volto dello sviluppo.Questo è ottimo per i programmatori che vogliono diversificare le proprie competenze e rimanere rilevanti nel mercato del lavoro. E

(Consigli tecnici e di design)

20 siti Web con effetto creativo MouseOver

Nel web design anche un minimo effetto può cambiare l'esperienza utente complessiva . questo può essere un effetto del glitch, un effetto di rimbalzo o anche un semplice effetto sonoro. Uno di questi effetti, essendo usato frequentemente nel web design in questi giorni è l'effetto hover o mouseover. Q

(Consigli tecnici e di design)