Share
Oggigiorno sempre più siti web usano le animazioni, sia sotto forma di GIF, SVG, WebGL, video di sfondo e così via. Se usato correttamente, l'animazione sul Web offre vita e interattività, aggiungendo un ulteriore livello di feedback ed esperienza per gli utenti.
In questo tutorial ho intenzione di presentarti alle animazioni CSS; un modo molto performante di fare cose che sta diventando sempre più popolare man mano che il supporto del browser migliora. Avendo coperto le nozioni di base, costruiremo un rapido esempio che animerà un elemento quadrato in un cerchio:
I designer di Envato Market sono stati impegnati a creare una gamma di animazioni CSS da collegare ai tuoi siti web, dalle ombre ai nastri, ai cursori e altro ancora.
Pacchetto ombra CSS3 sul mercato EnvatoPuoi anche assumere un esperto CSS su Envato Studio per aiutarti con una vasta gamma di correzioni e personalizzazioni per il tuo progetto.
Esperti di CSS su Envato StudioIl componente principale delle animazioni CSS è @keyframes, la regola CSS in cui viene creata l'animazione. Pensa a @keyframes come fasi lungo una linea del tempo. Dentro @keyframes, puoi definire queste fasi, ognuna con una dichiarazione di stile diversa.
Quindi, per far funzionare le animazioni CSS, è necessario associare il @keyframes a un selezionatore. Questo analizzerà gradualmente tutto il codice all'interno di @keyframes dichiarazioni e cambiare lo stile iniziale al nuovo stile, in base alle fasi.
Qui imposteremo le fasi di animazione. Nostro @keyframes le proprietà sono:
Per esempio:
@keyframes tutsFade 0% opacity: 1; 100% opacità: 0;
o:
@keyframes tutsFade from opacity: 1; a opacità: 0;
o la stenografia:
@keyframes tutsFade to opacity: 0;
Il codice sopra applicherà una transizione all'opacità di un elemento, da opacità: 1 a opacità: 0. Ciascuno degli approcci di cui sopra otterrà lo stesso risultato finale.
Il animazione la proprietà è usata per chiamare @keyframes all'interno di un selettore CSS. L'animazione può avere più proprietà:
Accentsconagua
Animazione-nome: @keyframes nome (ricorda che abbiamo scelto tutsFade).Animazione di durata: la durata del tempo, la durata totale dell'animazione dall'inizio alla fine.animazione-timing-function: imposta la velocità di animazione ( lineare | facilità | disinvoltura | disinvoltura | disinvoltura | cubico-Bezier ).animazione ritardo: il ritardo prima dell'inizio della nostra animazione.animazione-iterazione-count: Quante volte itererà attraverso l'animazione.animazione direzione: ti dà la possibilità di cambiare la direzione del loop, dall'inizio alla fine, o dalla fine all'inizio, o da entrambi.Animazione-fill-mode: specifica quali stili verranno applicati all'elemento quando la nostra animazione è terminata ( nessuno | avanti | indietro | tutti e due )Per esempio:
.element nome-animazione: tutsFade; durata animazione: 4s; ritardo di animazione: 1s; animazione-iterazione-conteggio: infinito; animazione-temporizzazione-funzione: lineare; animazione-direzione: alterna;
o stenografia:
.elemento animazione: tutsFade 4s 1s infinito lineare alternativo;
Il codice sopra creerà un effetto lampeggiante, con un ritardo di animazione di 1 secondo, una durata di animazione totale di 4 secondi, con direzione alternata e iterazioni di loop lineari infiniti.
Mentre una bozza di lavoro, abbiamo bisogno di utilizzare prefissi specifici del browser per garantire il miglior supporto del browser possibile. Si applicano i prefissi standard:
-webkit- -moz- -o- -Signorina- Un animazione la proprietà utilizzando i prefissi dei fornitori sarà simile a:
.element -webkit-animation: tutsFade 4s 1s infinito lineare alternativo; -moz-animation: tutsFade 4s 1s infinito lineare alternativo; -ms-animation: tutsFade 4s 1s infinito lineare alternativo; -o-animation: tutsFade 4s 1s infinito lineare alternativo; animazione: tutsFade 4s 1s infinito lineare alternativo;
insieme a @keyframes:
@ -webkit-keyframes tutsFade / * tuo stile * / @ -moz-keyframes tutsFade / * tuo stile * / @ -ms-keyframes tutsFade / * tuo stile * / @ -o-keyframes tutsFade / * il tuo stile * / @keyframes tutsFade / * il tuo stile * /
Per motivi di leggibilità durante questo tutorial continuerò ulteriormente senza usare i prefissi, ma la versione finale li includerà e vorrei incoraggiarvi ad usarli nel vostro codice CSS.
Per saperne di più sui prefissi dei fornitori, è possibile controllare http://css3please.com/, che è un ottimo sito Web per le risorse dei prefissi dei fornitori.
Puoi aggiungere più animazioni usando un separatore di virgola. Diciamo che vogliamo aggiungere una rotazione aggiuntiva al nostro tutsFade elemento, lo faremo dichiarando extra @keyframes e quindi legandoli al nostro elemento:
.elemento animazione: tutsFade 4s 1s infinito lineare alternativo, tutsRotate 4s 1s infinito lineare alternativo; @keyframes tutsFade to opacity: 0; @keyframes tutsRotate to transform: ruotare (180 gradi);
Entriamo e creiamo una transizione di forma semplice; un'animazione quadrata per circoscrivere usando i principi di cui sopra. Avremo cinque fasi in totale e per ogni fase definiremo un raggio di confine, una rotazione e un colore di sfondo diverso per il nostro elemento. Basta parlare, passiamo alla codifica.
Per prima cosa, creiamo il markup, un elemento da animare. Non ci preoccuperemo nemmeno dei nomi delle classi, per ora utilizzeremo semplicemente un div diviso:
Quindi, usando un selettore di elementi (div ), Aggiungi lo stile predefinito al div:
div larghezza: 200px; altezza: 200 px; colore di sfondo: corallo;
Adesso prepariamoci @keyframes, che chiameremo piazza-to-cerchio, e le cinque fasi
@keyframes square-to-circle 0% 25% 50% 75% 100%
Dobbiamo definire alcuni porcili in queste fasi, quindi iniziamo dettando il border-radius per ogni angolo del quadrato:
@ -webkit-keyframes square-to-circle 0% border-radius: 0 0 0 0; 25% border-radius: 50% 0 0 0; 50% border-radius: 50% 50% 0 0; 75% border-radius: 50% 50% 50% 0; 100% border-radius: 50%;
Inoltre possiamo dichiarare un diverso colore di sfondo per ogni fase.
@keyframes square-to-circle 0% border-radius: 0 0 0 0; sfondo: Corallo; 25% border-radius: 50% 0 0 0; sfondo: darksalmon; 50% border-radius: 50% 50% 0 0; sfondo: indianred; 75% border-radius: 50% 50% 50% 0; sfondo: lightcoral; 100% border-radius: 50%; sfondo: darksalmon;
Per colpire davvero l'idea di casa, andiamo oltre border-radius e colore di sfondo ruotando il div e aggiungendo un po 'di interesse visivo.
@keyframes square-to-circle 0% border-radius: 0 0 0 0; sfondo: Corallo; trasformare: rotate (0deg); 25% border-radius: 50% 0 0 0; sfondo: darksalmon; transform rotazione (45 gradi); 50% border-radius: 50% 50% 0 0; sfondo: indianred; transform ruotare (90deg); 75% border-radius: 50% 50% 50% 0; sfondo: lightcoral; trasformare: rotate (135deg); 100% border-radius: 50%; sfondo: darksalmon; transform rotazione (180 °);
Dopo aver definito la nostra animazione da piazza a cerchio, dobbiamo applicarla al div:
div larghezza: 200px; altezza: 200 px; colore di sfondo: corallo; animazione: alternata infinita da quadrato a cerchio 2s 1s;
Qui vedi che abbiamo aggiunto una stenografia animazione proprietà, che afferma:
piazza-to-cerchio.2s.1s.infinito, quindi continuerà all'infinito.alternato, quindi suonerà dall'inizio alla fine, poi di nuovo all'inizio, poi di nuovo fino alla fine e così via. Un ultimo valore che possiamo aggiungere alla proprietà di animazione è il animazione-timing-function. Questo definirà la velocità, l'accelerazione e la decelerazione del nostro movimento. Questa funzione può essere un valore molto dettagliato, che è scomodo da calcolare manualmente, ma ci sono molti siti web gratuiti che forniscono risorse e personalizzazione dal vivo per le funzioni di cronometraggio dell'animazione.
Uno di questi strumenti è lo strumento di animazione CSS Easing, quindi usiamolo per calcolare la nostra funzione di cronometraggio.
Vorrei aggiungere un elastico effetto al nostro piazza-to-cerchio animazione, usando una funzione cubico-bezier.
Avendo giocato con le maniglie e generato una sorta di curva di Bezier, aggiorna il valore della funzione di temporizzazione dell'animazione usando lo snippet fornito.
div larghezza: 200px; altezza: 200 px; colore di sfondo: corallo; animazione: alternata da 2 a 1 cubico-bezier quadrato (1, .015, .295,1.225);
Il codice finale, senza utilizzare i prefissi dei produttori ( -webkit- , -moz-, -Signorina-, -o- ) è come segue:
div larghezza: 200px; altezza: 200 px; colore di sfondo: corallo; animazione: alternata di cubi-bezier (1, .015, .295,1.225) infinita da quadrato a cerchio 2s .5s; @keyframes square-to-circle 0% border-radius: 0 0 0 0; sfondo: Corallo; trasformare: rotate (0deg); 25% border-radius: 50% 0 0 0; sfondo: darksalmon; transform rotazione (45 gradi); 50% border-radius: 50% 50% 0 0; sfondo: indianred; transform ruotare (90deg); 75% border-radius: 50% 50% 50% 0; sfondo: lightcoral; trasformare: rotate (135deg); 100% border-radius: 50%; sfondo: darksalmon; transform rotazione (180 °);
Tutto funziona bene nei browser moderni, ma Firefox ha una brutta abitudine di rendere gli oggetti in trasformazione in modo scadente. Dai un'occhiata a queste linee frastagliate per vedere cosa intendo:
Fortunatamente, c'è una soluzione per questo. Aggiungi il seguente schema trasparente al tuo div e Firefox renderà le cose perfettamente!
schema: 1px trasparente solido;
Questo è tutto! Abbiamo usato la sintassi CSS Animation per creare un'animazione semplice e ripetitiva.
Per informazioni aggiornate sul supporto dei browser per l'animazione CSS, consulta Posso usare ... ma in breve, i browser di supporto includono: Firefox 5+, IE 10+, Chrome, Safari 4 e versioni successive, Opera 12+.
