Come fare buon uso delle animazioni CSS3: tutorial, codici di esempio ed esempi

Articolo scritto da:
  • Website Design
  • Aggiornato: Aug 28, 2013

Quando usiamo JS e jQuery, abbiamo il pieno controllo sulle animazioni e possiamo creare effetti fantastici, ma il prezzo è piuttosto alto. Tempo di elaborazione, compatibilità cross-browser (i dispositivi mobili, per esempio, sono piuttosto diversi per quanto riguarda JS) e la complessità del codice stessa è un punto che dovremmo tenere a mente durante la creazione di interfacce animate.

Quindi, oggi vedremo come evitare JS usando le animazioni e le transizioni CSS. Discuteremo dai passaggi base per alcuni effetti fantastici, come i pannelli per fisarmonica e sottomenu animati.

Prendi posto, blocco note e un vero browser (tutto tranne IE) e iniziamo.

Riscaldamento

Abbiamo alcuni vantaggi (e svantaggi come ogni cosa nella nostra vita) nell'uso delle animazioni CSS. Se hai bisogno di venderli al tuo capo o al tuo cliente, questo è quello che dovresti tenere a mente:

  • Sono potenzialmente più veloci, dal momento che possono utilizzare l'accelerazione hardware (come implementazioni HTML5)
  • Funzioneranno meglio con i dispositivi mobili e non avranno bisogno di codice specifico per tenere traccia degli eventi touch
  • JS deve essere interpretato dal browser e le possibilità di rompere il browser sono molto più grandi. Quindi, quando il CSS fallisce, fallisce silenziosamente mentre JS può rompere l'intera pagina
  • Hanno un buon supporto per i browser (questo sito ti aiuterà a controllare statistiche specifiche su questo: http://caniuse.com/#search )

Esempi di animazioni CSS3

Prima di iniziare sulla carne di questo post, diamo un'occhiata ad alcune bellissime animazioni realizzate in puro CSS.

Whale Fail Twitter Twitter puro

Balena fallita animata

Prodotto da Steven Dennis, vedere questo in azione.

Can
Esempi di animazione CSS 3: Coca cola scorrevole

Prodotto da Roman Cortes, vedere questo in azione.

Pure CSS Walking Man

Esempi di animazione CSS 3: The Walking Man

Prodotto da Andrew Hoyer, vedere questo in azione.

Ti sporchi le mani

Iniziamo il codice. Useremo molto le pseudo classi CSS per attivare l'animazione. Per essere onesti, molti sviluppatori consigliano di utilizzare JS per attivare e disattivare le animazioni, ma qui vedremo il modo più semplice:

# test {background: rosso; } # test: hover {background: green; } # test: attivo {background: blu; } # test: target {background: black; }

Abbiamo poche altre pseudo-classi da usare, ma tu hai l'idea! Quindi, ecco cosa succede se fai clic sull'elemento #test (supponendo che si tratti di un collegamento):

  • Stato normale: lo sfondo sarà rosso
  • Passa il mouse: quando il mouse entra nell'area degli elementi avrà uno sfondo verde
  • Attivo: quando si fa clic sul cursore su di esso e mentre si preme ancora il pulsante del mouse, il colore dello sfondo sarà blu
  • Target: quando la pagina corrente ha il #test nell'URL questo elemento sarà nero

Ognuno di questi può essere utilizzato per le animazioni CSS, ad esempio è possibile creare collegamenti 2 per attivare e disattivare l'animazione CSS facendo uso dello pseudo elemento di destinazione con questo codice:

<a href='#test'> attiva </a> <a href='#'> disattivato </a>

Transizioni CSS

La transizione CSS cambierà gradualmente dallo stato iniziale a quello finale. Quindi definirai nel selettore principale usando la proprietà "transition" il tempo e ogni proprietà che sarà influenzata e come dovrebbe essere l'animazione. Vediamo un esempio:

.test {/ * transition-property duration timing function, * / color: blue; transizione: colore 2s, ridimensionamento font 2; }. test: hover {color: red; }. test: attivo {dimensione carattere: 200%; }

Quando passi con il mouse sull'elemento .test cambierà gradualmente il colore dal blu al rosso (che bella tavolozza, eh?). Quando fai clic sull'elemento, la dimensione del carattere aumenterà gradualmente fino a 200% rispetto alla dimensione predefinita del carattere.

Abbiamo anche la proprietà "transition timing", impostata come easy-out, ovvero come verrà speso il "tempo" disponibile per l'animazione. Ecco i valori possibili:

  • Lineare: stessa velocità dall'inizio alla fine
  • Facilità di accesso: avvio lento
  • Ease-out: fine lento
  • Facilità: avvio lento, veloce nel mezzo, poi lento
  • Ease-in-out: avvio lento, fine lento
  • Cubic-bezier (a, b, c, d): velocità personalizzata

La funzione cubica di Bezier creerà un'animazione personalizzata con numeri 4 che varia da 0 a 1, che rappresenta la curva matematica per la durata X della velocità di animazione.

Per una migliore compatibilità con i browser, dovresti prendere in considerazione l'uso dei prefissi dei fornitori per opera, Firefox e webkit come questo:

div {width: 400px; -o-transizione: larghezza 2s; -moz-transition: larghezza 2s; -webkit-transition: larghezza 2s; transizione: larghezza 2s; }

Inoltre, è possibile utilizzare le query multimediali per definire transizioni diverse a seconda della larghezza del browser (dispositivi mobili, tablet). Questo è un semplice esempio:

body {font-size: 1em; } @media screen e (max-width: 800px) {body {font-size: 0.8em; }} @media screen e (max-width: 400px) {body {Dimensioni carattere: 0.7em; }}

Qui la dimensione del carattere verrà modificata improvvisamente quando si aumenta la larghezza del browser. Questo codice impedirà che ciò accada, dando una transizione molto più agevole:

body {-o-transition: font-size .5s linear; -moz-transition: font-size .5s linear; -webkit-transition: font-size .5s linear; transizione: font-size .5s lineare; }

Puoi usare questo anche se hai diversi display o dimensioni per verticale / orizzontale, se vuoi cambiare larghezze, colori, paddings, display del menu.

Animazione CSS: inizia il vero divertimento

L'animazione è una sequenza di transizioni definite in un singolo selettore. Per definire le animazioni CSS è necessario seguire i passaggi 2.

La regola @keyframe viene utilizzata per definire una sequenza di passaggi dell'animazione ed è definita da un nome univoco e dagli stili che descrivono il funzionamento di questa animazione. Come al solito avremo bisogno di alcuni prefissi per i fornitori, come in questo esempio:

/ * lo stesso codice per ogni fornitore * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * nome dell'animazione * / @keyframe my-animation {/ * frame selector * / 0% {/ * frame style * / Left: 0px; Superiore: 0px; } 25% {Sinistra: 200px; Superiore: 0px; } 50% {Sinistra: 200px; Superiore: 200px; } 75% {Sinistra: 0px; Superiore: 200px; } 100% {Sinistra: 0px; Superiore: 0px; }}

Quindi, ogni stile è definito dal frame / timeframe (come quei frame da un'animazione flash) in percentuale e dagli stili che dovrebbero essere applicati lì. Questo keyframe, ad esempio, dice che l'elemento si sposterà a sinistra, quindi in alto, poi a destra, quindi in basso.

Dopo aver seguito il passaggio 1 e creato il tuo fotogramma chiave, puoi effettivamente applicarlo a un elemento. Quindi useremo più o meno la stessa logica che abbiamo fatto con la transizione CSS, la differenza è che ora la nostra "transizione" è un'animazione molto complessa.

Per applicarlo utilizzeremo la proprietà dell'animazione e abbiamo proprietà secondarie 7:

  • Nome: quell'identificatore univoco
  • Durata: quanto tempo impiega da 0% a 100%
  • Funzione di cronometraggio: praticamente uguale alla funzione di temporizzazione della transizione
  • Ritardo: quanto tempo occorrerà per avviare 0%
  • Conteggio delle iterazioni: quante ripetizioni avremo ("infinito" per un ciclo infinito)
  • Direzione: normale o alternata (inversa)
  • Stato di riproduzione: se l'animazione è in esecuzione o in pausa

Questo applicherà la nostra animazione all'elemento #test quando è la destinazione della pagina:

# test: target {/ * nome-animazione | durata | funzione di temporizzazione | delay | iteration-count | direzione | play-state * / animation: la mia animazione 10s lineare 0s infinito funzionamento normale; }

Con questo in mente possiamo creare alcuni fantastici esempi.

Solo fisarmonica CSS

Creeremo pannelli pieghevoli facendo uso delle animazioni CSS. Ecco la struttura HTML di base:

<div class = "fisarmonica"> <a href="#tab1"> Scheda 1 </a> <div id = "tab1"> <p> TESTO 1 </ p> </ div> <a href = "# tab2 "> Scheda 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Scheda 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

Questo creerà solo i pannelli e il link che attiverà ognuno di essi. E qui è dove avviene la magia:

/ * qualsiasi div all'interno della fisarmonica * /. divordion div {/ * è nascosto per default * / height: 0; overflow: nascosto; / * la magia nera * / transizione: altezza 1s; } / * quando il div menzionato è il target * / .accordion div: target {/ * height: auto non funzionerà, ma funzionerà bene * / height: 80px; }

Abbastanza semplice, eh? E hai passato tutta la vita usando JS per questo? :)

Menu solo CSS con sottomenu

E questa è un'altra applicazione piuttosto semplice. Sicuramente hai un menu di navigazione nel tuo sito e spesso abbiamo bisogno di utilizzare alcuni sottomenu lì. Il modo migliore per mostrare e nascondere gli oggetti è usare jQuery, giusto? Bene, ripensaci dopo aver testato questo codice:

<nav> <ul> <li> <a href='#item1'> articolo 1 </a> <div> <ul> <li> <a href='#item11'> articolo 1.1 </a> </ li> <li> <a href='#item12'> articolo 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> articolo 2 </a> <div> <ul> <li> <a href='#item21'> Articolo 2.1 </a> </ li> <li> <a href='#item22'> Articolo 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

E la magia inizia qui:

un {/ * che rende i collegamenti un po 'più * / display: block; padding: 4px; } nav {text-align: center; } / * qualsiasi menu (incluso quello principale) * / nav ul {display: inline-block; stile elenco: nessuno; } nav> ul> li {/ * elementi orizzontali (anche la verticale funzionerà bene) * / float: left; } nav li div {/ * comprimendo qualsiasi sottomenu * / altezza: 0; overflow: nascosto; / * Sentimenti di Houdini * / transizione: altezza 1; } nav li: hover> div {height: 56px; }

Riassumendo

Questa è certamente solo una guida introduttiva. Ci sono molti altri fantastici effetti che si possono fare usando le animazioni dei CSS e molte altre cose che devono ancora venire.

Quindi, hai usato questo prima? Puoi pensare ad un'altra buona applicazione per le animazioni CSS? Condividi i tuoi pensieri usando i commenti!

A proposito di Rochester Oliveira

Sono un web designer e imprenditore di Itajubá (MG), Brasile. Adoro scrivere argomenti oscuri e fare cose interessanti.

Collegare: