Come sfruttare al meglio le animazioni CSS3: tutorial, codici di esempio ed esempi

Quando usiamo JS e jQuery abbiamo il pieno controllo delle animazioni e possiamo creare alcuni effetti fantastici, ma il prezzo è piuttosto alto. Il tempo di elaborazione, la compatibilità tra browser (i dispositivi mobili, ad esempio, sono piuttosto diversi quando si tratta di JS) e la complessità del codice stesso sono punti che dovremmo tenere a mente durante la creazione di interfacce animate.


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

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

Riscaldamento

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

  • Sono potenzialmente più veloci, poiché possono utilizzare l’accelerazione hardware (come implementazioni HTML5)
  • Funzioneranno meglio sui dispositivi mobili e non sarà necessario un codice specifico per tenere traccia degli eventi tattili
  • JS deve essere interpretato dal browser e le possibilità di interrompere il browser sono molto più grandi. Quindi, quando i CSS falliscono, falliscono silenziosamente mentre JS può rompere l’intera pagina
  • Hanno un buon supporto per il 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.

Pure CSS Twitter Fail Whale

Balena fallita animata

 Realizzato da Steven Dennis, guarda questo in azione.

Scatola di coca cola a scorrimento CSS puro
Esempi di animazione CSS 3: Scrolling Coke Can

Realizzato da Roman Cortes, guarda questo in azione.

Pure CSS Walking Man

Esempi di animazione CSS 3: The Walking Man

 Realizzato da Andrew Hoyer, guarda questo in azione.

Sporcarsi le mani

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

#test {
sfondo: rosso;
}
#test: hover {
sfondo: verde;
}
#test: attivo {
sfondo: blu;
}
#test: target {
sfondo: nero;
}

Abbiamo alcune altre pseudo-classi da usare, ma tu hai l’idea! Quindi, ecco cosa succede se fai clic sull’elemento #test (supponendo che sia un link):

  • Stato normale: lo sfondo sarà rosso
  • Passa il mouse: quando il mouse entra nell’area degli elementi, avrà uno sfondo verde
  • Attivo: quando fai clic sul cursore su di esso e mentre il pulsante del mouse è ancora premuto, il colore di 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 2 collegamenti per attivare e disattivare l’animazione CSS facendo uso dello pseudo elemento target con questo codice:

attivare
disattivare

Transizioni CSS

La transizione CSS cambierà uniformemente dallo stato iniziale a quello finale. Quindi definirai nel selettore principale usando la proprietà “transizione” l’ora e ogni proprietà che saranno interessate e come dovrebbe essere l’animazione. Vediamo un esempio:

.test {
/ * funzione di temporizzazione della durata della proprietà di transizione, * /
colore blu;
transizione: colore 2s, attenuazione carattere 2s;
}
.test: hover {
colore rosso;
}
.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 si fa clic sull’elemento, la dimensione del carattere aumenta gradualmente fino al 200% della dimensione del carattere predefinita.

Abbiamo anche la proprietà “timing timing”, impostata come easy-out, in base alla quale verrà speso il “tempo” disponibile per l’animazione. Ecco i possibili valori:

  • Lineare: stessa velocità dall’inizio alla fine
  • Facilità di avvio: avvio lento
  • Facilità: fine lenta
  • Facilità: avvio lento, veloce nel mezzo, quindi fine lenta
  • 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 4 numeri che variano da 0 a 1, che rappresentano la curva matematica per la velocità di animazione X durata.

Per una migliore compatibilità del browser, dovresti prendere in considerazione l’utilizzo dei prefissi del fornitore per opera, Firefox e webkit in questo modo:

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

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

body {
dimensione carattere: 1em;
}
schermo @media e (larghezza massima: 800px) {
body {
dimensione carattere: 0,8em;
}
}
schermo @media e (larghezza massima: 400px) {
body {
Dimensione carattere: 0,7em;
}
}

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

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

Puoi usarlo anche se hai schermi o dimensioni diverse per verticale / orizzontale, se vuoi cambiare larghezze, colori, imbottiture, menu.

Animazione CSS – Il vero divertimento inizia

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

La regola @keyframe viene utilizzata per definire una sequenza di passaggi di 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 dei fornitori, come in questo esempio:

/ * lo stesso codice per ogni fornitore * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * nome animazione * /
@keyframe my-animation {
/ * selettore di frame * /
0% {
/ * stile cornice * /
Sinistra: 0px;
In alto: 0px;
}
25% {
Sinistra: 200px;
In alto: 0px;
}
50% {
Sinistra: 200px;
Superiore: 200 px;
}
75% {
Sinistra: 0px;
Superiore: 200 px;
}
100% {
Sinistra: 0px;
In alto: 0px;
}
}

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

Dopo aver seguito il passaggio 1 e creato il tuo fotogramma chiave, puoi effettivamente applicarlo a un elemento. Quindi useremo praticamente 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à di animazione e ha 7 proprietà secondarie:

  • Nome: quell’identificatore univoco
  • Durata: quanto tempo impiegherà dallo 0% al 100%
  • Funzione di temporizzazione: praticamente uguale alla funzione di temporizzazione di transizione
  • Ritardo: quanto tempo ci vorrà per iniziare lo 0%
  • Conteggio iterativo: quante ripetizioni avremo (“infinito” per un ciclo infinito)
  • Direzione: normale o alternata (retromarcia)
  • Stato di riproduzione: se l’animazione è in esecuzione o in pausa

Questo applicherà la nostra animazione all’elemento #test quando è il target della pagina:

#test: target {
/ * nome-animazione | durata | funzione di temporizzazione | ritardo | conteggio iterazione | direzione | stato di gioco * /
animazione: my-animation 10s linear 0s infinito normale corsa;
}

Con questo in mente possiamo creare alcuni esempi fantastici.

Fisarmonica solo CSS

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

Scheda 1

TESTO 1

Scheda 2

TESTO 2

Scheda 3

TESTO 3

Questo creerà solo i pannelli e il collegamento che attiverà ciascuno di essi. Ed ecco dove accade la magia:

/ * qualsiasi div che si trova all’interno della fisarmonica * /
.fisarmonica div {
/ * è nascosto per impostazione predefinita * /
altezza: 0;
troppo pieno: nascosto;
/ * la magia nera * /
transizione: altezza 1s;
}
/ * quando il div menzionato è l’obiettivo * /
.fisarmonica div: target {
/ * altezza: l’auto non funzionerà, ma funzionerà bene * /
altezza: 80 px;
}

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

Menu solo CSS con sottomenu

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

  • Articolo 1
    • Punto 1.1
    • Punto 1.2
  • Articolo 2
    • Punto 2.1
    • Punto 2.2

E la magia inizia qui:

un {
/ * solo migliorando leggermente i collegamenti * /
blocco di visualizzazione;
imbottitura: 4px;
}
nav {
text-align: center;
}
/ * qualsiasi menu (incluso quello principale) * /
nav ul {
display: blocco in linea;
stile elenco: nessuno;
}
nav>ul>li {
/ * oggetti orizzontali (anche il verticale funzionerà bene) * /
galleggiante: a sinistra;
}
nav li div {
/ * comprimendo qualsiasi sottomenu * /
altezza: 0;
troppo pieno: nascosto;
/ * Sentimenti Houdini * /
transizione: altezza 1s;
}
nav li: hover>div {
altezza: 56px;
}

Riassumendo

Questa è certamente solo una guida introduttiva. Ci sono molti altri fantastici effetti che possono essere fatti usando solo animazioni CSS e molte cose sicuramente devono ancora venire.

Quindi, l’hai usato prima? Riesci a pensare a un’altra buona applicazione per le animazioni CSS? Condividi i tuoi pensieri usando i commenti!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map