Usato bene, l’animazione CSS è uno strumento incredibilmente utile e potente. Può aggiungere interesse o eccitazione creativa, dirigere l’occhio dell’utente, spiegare qualcosa in modo rapido e succinto e migliorare l’usabilità. Per questo motivo, gli ultimi anni hanno visto sempre più animazione su siti e in app.

In questo articolo, abbiamo arrotondare alcuni dei più cool esempi di animazione CSS che abbiamo visto, e vi mostrerà come ricrearli., Continua a leggere per una serie di tutorial approfonditi ed effetti ispiratori (e link al loro codice) da esplorare.

Che cos’è l’animazione CSS?

L’animazione CSS è un metodo per animare determinati elementi HTML senza dover utilizzare JavaScript o Flash affamati di processore e memoria. Non c’è limite al numero o alla frequenza delle proprietà CSS che possono essere modificate. Le animazioni CSS vengono avviate specificando i fotogrammi chiave per l’animazione: questi fotogrammi chiave contengono gli stili che l’elemento avrà.,

Mentre può sembrare limitato quando si tratta di animazione, CSS è in realtà uno strumento davvero potente ed è in grado di produrre animazioni a 60fps splendidamente lisce. “Fornire animazioni fluide e riflessive che contribuiscano in modo significativo al tuo sito non deve essere difficile”, afferma lo sviluppatore web front-end Adam Kuhn. “Le proprietà CSS moderne ora ti offrono quasi tutti gli strumenti necessari per creare esperienze memorabili per i tuoi utenti.,”

Le migliori animazioni hanno ancora le loro radici nel classico Disney 12 principi di animazione – vedrete diverse menzioni di che in questi esempi di animazione CSS, quindi vale la pena di verificare che l’articolo prima di iniziare. Si potrebbe anche voler esplorare la nostra carrellata di grandi video musicali animati per ulteriori esempi e ispirazione.

La regola d’oro è che le animazioni CSS non dovrebbero essere esagerate – anche un piccolo movimento può avere un grande impatto, e troppo può essere fonte di distrazione e irritante per gli utenti., Ecco i nostri esempi preferiti e come ricrearli.

Fun mouse effect

  • Autore: Donovan Hutchinson

Questo è un effetto divertente che segue il mouse in giro. Potrebbe essere utile quando vuoi attirare l’attenzione su un elemento della tua pagina.

Abbiamo bisogno di pochissimo HTML per questo effetto:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

In primo luogo, posizioniamo la demo e impostiamo la prospettiva per la nostra trasformazione 3D:

Quindi disegniamo il div che vogliamo animare:

Qui impostiamo uno sfondo, quindi impostiamo l’overflow su hidden in modo da poter aggiungere un effetto sheen in seguito., Abbiamo anche impostato variabili css, sheenX e sheenY.

Queste variabili sheen aiuteranno a posizionare l’effetto sheen. Li usiamo nella nostra scheda dopo pseudo-elemento:

Qui ci assicuriamo che lo pseudo-elemento sia più grande del contenitore. Questo ci darà qualcosa da scivolare sulla parte superiore della carta usando transform.

La proprietà transform utilizza le variabili CSS impostate in precedenza. Imposteremo quelli con JavaScript. Impostiamo il JavaScript per ascoltare prima gli eventi del mouse:

documento.,onmousemove = handleMouseMove;

Ora abbiamo bisogno di una funzione handleMouseMove per gestire onmousemove:

La nostra funzione prende l’altezza e la larghezza della finestra e crea un angolo sugli assi X e Y. Abbiamo quindi impostato questi per lo stile di trasformazione della nostra carta. Questo dà alla carta un angolo basato sul mouse!

Chiamiamo quindi una funzione per impostare la posizione dello pseudo-elemento:

Il nostro pseudo-elemento sembra migliore quando si muove nella direzione opposta al mouse. Per ottenere ciò creiamo un numero compreso tra -0,5 e 0,5 che cambia nella direzione opposta calcolando il rapporto di -1.,

Moltiplichiamo questo numero per 800 come vogliamo che scala fino ad un massimo di 400px, che è fino a che punto impostiamo lo pseudo-elemento sheen al di fuori della carta.

Infine impostiamo questi valori di offset alle nostre proprietà delle variabili CSS, e il renderer del browser fa il resto.

Ora abbiamo una carta che gira per affrontare il nostro mouse mentre l’effetto lucentezza si muove nella direzione opposta in alto. Questo crea un effetto piacevole e accattivante.,

The big reveal

  • Autore: Adam Kuhn

Gli effetti di rivelazione dei contenuti animati sembrano essere molto popolari in questo momento e usati correttamente possono catturare l’attenzione dell’utente e coinvolgere il pubblico. L’hai già visto prima: un blocco di colore cresce da un lato o dall’altro orizzontalmente o verticalmente, e poi si ritira sul lato opposto, questa volta rivelando un testo o un’immagine sottostante. È un concetto che potrebbe sembrare complicato, ma in realtà si basa su poche cose.,

Per prima cosa, imposteremo il nostro posizionamento degli elementi (scarica il codice completo qui) – definilo come relativo (solo static fallirà in questo caso). Nei casi di testo è meglio consentire l’altezza e la larghezza automatiche, anche se un po ‘ di padding non fa male. Definiremo anche un’origine di trasformazione, nel caso dell’elemento genitore vogliamo usare la posizione di partenza. Poiché inizialmente vogliamo che l’elemento sia nascosto, useremo una trasformazione di scala lungo l’asse appropriato per ridurlo.

Quindi, uno pseudo elemento per mascherare il nostro genitore, impostando l’origine della trasformazione sull’opzione opposta., Infine, stringa insieme le animazioni, utilizzando le funzioni di temporizzazione o i ritardi per compensare ciascuna.

Nota, abbiamo compensato le animazioni del genitore e dello pseudo elemento con un ritardo che dice alla casella che nasconde il nostro testo di rivelarlo solo dopo che l’elemento stesso è stato completamente ridimensionato in vista. Controlla il Codepen qui sotto.

Scaglionare su

  • Autore: Adam Kuhn

una Volta che hai iniziato ad accumulare una discreta libreria di vari frammenti di allentamento, è tempo di guardare in altri modi per migliorare la profondità delle animazioni, e uno dei modi migliori è quello di compensare i vostri elementi animati.,

È fin troppo comune che un trigger JavaScript sia impostato per avviare una serie di animazioni basate sulla posizione di scorrimento, solo per trovare tutti gli elementi che si muovono efficacemente in tandem. Fortunatamente CSS stesso fornisce una semplice proprietà che può rendere (o rompere) la vostra esperienza animata: animation-delay.

Diciamo, ad esempio, che abbiamo una griglia di immagini che vogliamo animare in frame quando l’utente scorre. C’è un certo numero di modi in cui potremmo attivarlo, molto probabilmente aggiungendo classi agli elementi mentre entrano nella finestra., Questo può essere piuttosto pesante sul browser, tuttavia, e può essere evitato semplicemente aggiungendo una singola classe a un elemento contenitore e definendo i ritardi di animazione sugli elementi figlio.

Questo è un caso d’uso particolarmente buono per i preprocessori come SCSS o MENO, che ci permettono di usare un ciclo @for per iterare attraverso ogni elemento.

#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}

Qui vedrai che con SCSS siamo in grado di scorrere ogni selettore :nth-of-type, quindi applicare un ritardo di animazione in base al valore numerico di ogni elemento figlio., In questo caso noterai che dividiamo i nostri tempi per ridurre ogni incremento a una frazione di secondo. Mentre compensare i tuoi elementi animati può dare emozione alla tua animazione, troppo ritardo può farlo sentire disgiunto. Dai un’occhiata a questo CodePen qui sotto.

Squigglevision

  • Autore: Adam Kuhn

I filtri SVG offrono un ottimo modo per ottenere una sensazione naturale disegnata a mano e sfuggire ad alcuni dei vincoli di rendering flat-feeling dei soli CSS. Animarli può migliorare ulteriormente l’effetto.

Caso in questione: Squigglevision., Sì, questo non è un termine tecnico noto alla maggior parte degli animatori, ma sicuramente l’hai visto impiegato nei cartoni animati. L’idea è che i bordi di questi elementi animati non sono solo un po ‘ frastagliati e ruvidi, ma questi spigoli variano rapidamente, fotogramma per fotogramma, facendoli sentire come se fossero stati strappati dalle pagine di un album da disegno e portati alla vita.

Per ottenere questo effetto, possiamo includere un SVG sulla nostra pagina con più filtri e leggere variazioni nei livelli di turbolenza per ciascuno. Successivamente, configureremo la nostra timeline di animazione, chiamando ogni filtro nel proprio fotogramma chiave., E ‘importante giocare con le durate di temporizzazione come prevediamo l’animazione si sentirà ‘jumpy’, ma non voglio così lento da sentirsi sconnesso o così veloce da sentirsi pazzo.

A tal fine, è importante notare che i CSS non hanno la capacità di passare agevolmente tra i filtri SVG in quanto non c’è modo di accedere a proprietà come turbolenza e scala, quindi questi tipi di animazioni dovrebbero sempre essere agitati.,

Tumbling lettering

  • Come visto su: Gioco dell’Anno
  • Autore: Leon brown

Google Gioco dell’Anno, dispone di un giocoso animazioni CSS sulla homepage, con il titolo le parole burattatura e sbattere l’uno nell’altro. Ecco come è stato fatto.

Il primo passo è definire il documento della pagina web con HTML. Consiste nel contenitore di documenti HTML, che memorizza una sezione testa e corpo., Mentre la sezione head viene utilizzata per caricare le risorse CSS e JavaScript esterne, il body viene utilizzato per memorizzare il contenuto della pagina.

Il contenuto della pagina è costituito da tre tag titolo h1 che mostreranno le diverse varianti dell’effetto di animazione. Mentre qualsiasi testo può essere inserito in questi tag, la loro animazione è definita dai nomi nell’attributo class. Le impostazioni di presentazione e animazione per questi nomi di classe saranno definite nel CSS in seguito.

Quindi, creare un nuovo file chiamato ‘codice.js’., Vogliamo trovare tutti gli elementi della pagina con la classe animate e creare un elenco di array che rappresenta ogni parola del testo interno. In questo passaggio viene definito anche il ritardo iniziale dell’animazione. Il contenuto della pagina non è disponibile fino a quando la pagina non è completamente caricata, quindi questo codice viene inserito all’interno del listener di eventi load della finestra.

Il contenuto delle parole degli elementi di animazione deve essere contenuto all’interno di un elemento span. Per fare ciò, il contenuto HTML esistente viene reimpostato su vuoto, quindi viene utilizzato un ciclo per rendere la parola nell’elenco “parole” identificate un elemento span., Inoltre, viene applicato uno stile animationDelay, calcolato in relazione al ritardo iniziale (specificato di seguito) e alla posizione dell’indice della parola.

Crea un nuovo file chiamato styles.CSS. Ora imposteremo le regole di presentazione che faranno parte di ogni elemento word nell’animazione, controllate dal loro tag span. La visualizzazione come blocco, combinata con l’allineamento del testo centrato, farà sì che ogni parola appaia su una linea separata allineata orizzontalmente al centro del suo contenitore. Il posizionamento relativo verrà utilizzato per animare in relazione alla sua posizione del flusso di testo.,

.animate span{display: block;position: relative;text-align: center;}

Gli elementi di animazione che hanno la classe avanti e indietro hanno un’animazione specifica applicata a loro. Questo passaggio definisce l’animazione da applicare agli elementi di span il cui contenitore padre ha sia la classe animate che backwards o forward.

Nota come non c’è spazio tra il riferimento alla classe animate e backwards, il che significa che l’elemento genitore deve avere entrambi.

L’animazione mista viene definita utilizzando le stesse impostazioni utilizzate per le animazioni avanti e indietro., Invece di applicare le animazioni a ogni figlio del genitore, il selettore nth-child viene utilizzato per applicare le impostazioni di animazione alternate. L’animazione all’indietro viene applicata a tutti i bambini pari, mentre l’animazione in avanti viene applicata a tutti i bambini dispari.

Le animazioni che abbiamo appena creato sono realizzate con una posizione iniziale ‘da’, senza regolazione della posizione verticale o della rotazione. La posizione ‘ a ‘ è lo stato finale dell’animazione, che imposta gli elementi con una posizione verticale regolata e uno stato di rotazione., Impostazioni di fine leggermente diverse vengono utilizzate per entrambe le animazioni per evitare che il testo diventi illeggibile a causa della sovrapposizione in animazioni miste.

Flip book

  • Autore: Adam Kuhn

Quando si anima con CSS a volte è necessario un approccio semplice. E ci sono pochi metodi di animazione più semplici rispetto al flip book. Utilizzando steps () come funzione di temporizzazione, siamo in grado di replicare questo effetto. Anche se questo potrebbe sembrare mosso e contraddire direttamente la nostra missione di mantenere la fluidità, con il giusto ritmo può sembrare altrettanto perfettamente organico.

Quindi come funziona?, Definiamo la nostra funzione di animation easing con pochi parametri aggiuntivi-dicendo alla nostra animazione quanti passaggi sono necessari e a che punto durante il primo passo che vorremmo iniziare (start, end) – guardando un po ‘ come questo, ad esempio i passaggi (10, start).

All’interno dei nostri fotogrammi chiave, ora possiamo designare un punto finale della nostra animazione: per questo esempio supponiamo che la nostra animazione sia lunga 10 secondi e stiamo usando 10 passaggi. In questo caso, ogni passo sarà lungo un secondo, passando immediatamente al seguente fotogramma di un secondo senza transizione tra.,

Ancora una volta, questo sembra volare di fronte alla fluidità, ma qui è dove le animazioni a gradini possono davvero brillare. Possiamo iterare in modo incrementale attraverso un foglio sprite e animare fotogramma per fotogramma proprio come un flip book. Definendo fotogrammi di dimensioni uguali ma compilandoli su una singola immagine orizzontale (o verticale), possiamo impostare questa immagine come sfondo dell’elemento e definire una posizione di sfondo in pixel o percentuale come punto finale della nostra animazione, consentendo un singolo passaggio per ogni fotogramma., Il foglio sprite quindi sposta e popola l’elemento fotogramma per fotogramma con una nuova immagine di sfondo in base alla sua posizione.

Diamo un’occhiata a un esempio. In questo caso alcuni set di gambe animate aggiunti ad alcuni caratteri di testo. Per prima cosa, definiremo il nome dell’animazione, la durata, il conteggio dei passi, la posizione iniziale e il conteggio delle iterazioni: 

animation:runner 0.75s steps(32, end) infinite;

Ancora una volta, si noti che la durata è relativamente veloce a meno di un secondo intero per 32 fotogrammi totali., Successivamente, definiremo i nostri fotogrammi chiave:

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

Si noti che il posizionamento verticale dell’immagine è coerente in tutto, il che ci dice che gli sprite sono allungati orizzontalmente sull’immagine, che è 1280px in larghezza totale. Come abbiamo definito 32 fotogrammi totali per quell’immagine, possiamo dedurre che ogni fotogramma dovrebbe essere largo 40px. Dai un’occhiata a questo Codepen qui sotto.

È importante notare che un foglio di sprite di grandi dimensioni può potenzialmente essere un grave ostacolo alle prestazioni, quindi assicurati di dimensionare e comprimere le immagini., Con un foglio di sprite ben realizzato e una durata di animazione appropriata ora hai un’animazione fluida in grado di trasmettere movimenti complessi.

Blowing bubbles

  • Come visto su: 7UP
  • Visualizza il codice
  • Autore: Steven Roberts

L’animazione delle bolle CSS che presenta su 7UP è un bellissimo esempio di portare un tema di marca attraverso il design del sito web. L’animazione è composta da alcuni elementi: il disegno SVG delle bolle e poi due animazioni applicate a ciascuna bolla.,

La prima animazione cambia l’opacità della bolla e la sposta verticalmente nella finestra di visualizzazione; la seconda crea l’effetto di oscillazione per un maggiore realismo. Gli offset vengono gestiti prendendo di mira ogni bolla e applicando una durata e un ritardo di animazione diversi.

Per creare le nostre bolle useremo SVG. Nel nostro SVG creiamo due strati di bolle: uno per le bolle più grandi e uno per le bolle più piccole. All’interno dell’SVG posizioniamo tutte le nostre bolle nella parte inferiore della finestra di visualizzazione.,

Per applicare due animazioni separate ai nostri SVG, entrambi utilizzando la proprietà transform, dobbiamo applicare le animazioni agli elementi separati. L’elemento<g> in SVG può essere usato come un div in HTML; dobbiamo avvolgere ciascuna delle nostre bolle (che sono già in un gruppo) in un tag di gruppo.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

I CSS hanno un potente motore di animazione e un codice molto semplice per produrre animazioni complesse., Inizieremo con lo spostamento delle bolle sullo schermo e cambiando la loro opacità al fine di svanire dentro e fuori all’inizio e alla fine dell’animazione.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

Al fine di creare un effetto di oscillazione, abbiamo semplicemente bisogno di spostare (o tradurre) la bolla a destra ea sinistra, per la giusta quantità – troppo farà sì che l’animazione a guardare troppo jaunting e scollegato, mentre troppo poco passerà per lo più inosservato. La sperimentazione è fondamentale quando si lavora con l’animazione.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

Per applicare l’animazione alle nostre bolle, useremo i gruppi che abbiamo usato in precedenza e l’aiuto di nth-of-type per identificare ogni gruppo di bolle individualmente. Iniziamo applicando un valore di opacità alle bolle e la proprietà will-change per utilizzare l’accelerazione hardware.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

Vogliamo mantenere tutti i tempi di animazione e ritardi entro un paio di secondi l’uno dall’altro e impostarli per ripetere all’infinito. Infine, applichiamo la funzione di temporizzazione ease-in-out alla nostra animazione wobble per farlo sembrare un po ‘ più naturale.,

Mouse a scorrimento

  • Come visto su: Baltic Training
  • Visualizza il codice
  • Autore: Steven Roberts

Una sottile animazione a scorrimento del mouse può dare indicazioni all’utente quando atterra per la prima volta su un sito web. Sebbene ciò possa essere realizzato utilizzando elementi e proprietà HTML, utilizzeremo SVG poiché è più adatto al disegno.

All’interno del nostro SVG abbiamo bisogno di un rettangolo con angoli arrotondati e un cerchio per l’elemento che stiamo per animare, usando SVG possiamo scalare l’icona a qualsiasi dimensione abbiamo bisogno.,

Ora abbiamo creato il nostro SVG, abbiamo bisogno di applicare alcuni stili semplici al fine di controllare la dimensione e la posizione dell’icona all’interno del nostro contenitore. Abbiamo avvolto un link attorno al mouse SVG e lo abbiamo posizionato nella parte inferiore dello schermo.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

Successivamente creeremo la nostra animazione. A 0 e 20 per cento del percorso attraverso la nostra animazione, vogliamo impostare lo stato del nostro elemento come inizia. Impostandolo al 20% del percorso, rimarrà fermo per una parte del tempo quando ripetuto all’infinito.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

Dobbiamo aggiungere il punto iniziale di opacità e quindi trasformare sia la posizione Y che la scala verticale al 100%, la fine della nostra animazione. L’ultima cosa che dobbiamo fare è eliminare l’opacità per svanire il nostro cerchio.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

Infine applichiamo l’animazione al cerchio, insieme alla proprietà ‘transform-origin’ e alla proprietà will-change per consentire l’accelerazione hardware. Le proprietà di animazione sono abbastanza auto-esplicative., La funzione di temporizzazione cubic-bezier viene utilizzata per tirare prima il cerchio indietro prima di farlo cadere sul fondo della nostra forma del mouse; questo aggiunge una sensazione giocosa all’animazione.,

Animato la scrittura

fare Clic per vedere l’animazione in azione
  • Come visto su: Giardino Otto
  • Visualizzare il codice per i sentieri e testo
  • Autore: Steven Roberts

Il Giardino di Otto sito web utilizza una comune tecnica di animazione in cui il testo sembra essere scritti. Per ottenere l’effetto, ci rivolgiamo a SVG. Per cominciare, creeremo l’SVG., Ci sono due approcci qui: convertire il testo in percorsi per animarli o utilizzare il testo SVG. Entrambi gli approcci hanno i loro pro e contro.

Inizia creando la nostra animazione keyframe. L’unica funzione che abbiamo bisogno di eseguire è cambiare il tratto-dashoffset. Ora che abbiamo creato la nostra animazione, dobbiamo applicare i valori da cui vogliamo animare. Impostiamo il tratto-dasharray, che creerà spazi vuoti nel tratto. Vogliamo impostare il nostro tratto in modo che sia un valore abbastanza grande da coprire l’intero elemento, compensando infine il trattino per la lunghezza del tratto.,

La magia accade quando applichiamo la nostra animazione. Animando l’offset, stiamo portando il tratto in vista-creando un effetto di disegno. Vogliamo che gli elementi disegnino uno alla volta, con una certa sovrapposizione tra la fine del disegno di un elemento e l’inizio del disegno successivo. Per ottenere ciò ci rivolgiamo a Sass/SCSS e nth-of-type per ritardare ogni lettera della metà della lunghezza dell’animazione, moltiplicata per la posizione di quella particolare lettera.,

Flying birds

  • Come visto su: Fournier Père et Fils
  • Visualizzare il codice di un singolo uccello o l’intero gregge
  • Autore: Steven Roberts

iniziamo con completamente dritto linee vettoriali, disegno ogni fotogramma di animazione, raffigurante l’uccello in un diverso stato del volo. Quindi manipoliamo i punti vettoriali e arrotondiamo le linee e i bordi. Infine, mettiamo ogni fotogramma in una scatola di dimensioni uguali e li mettiamo fianco a fianco. Esporta il file come SVG.

La configurazione HTML è molto semplice., Abbiamo solo bisogno di avvolgere ogni uccello in un contenitore per applicare più animazioni – una per far volare l’uccello e l’altra per spostarlo sullo schermo.

<div class="bird-container"> <div class="bird"></div></div>

Applichiamo il nostro SVG bird come sfondo al nostro div bird e scegliamo la dimensione che vogliamo che ogni fotogramma sia. Usiamo la larghezza per calcolare approssimativamente la nuova posizione di sfondo. L’SVG ha 10 celle, quindi moltiplichiamo la nostra larghezza per 10 e quindi modifichiamo leggermente il numero finché non sembra corretto.

L’animazione CSS ha un paio di trucchi di cui potresti non essere a conoscenza., Possiamo usare l’animazione-timing-funzione per mostrare l’immagine in passi – molto simile sfogliando le pagine in un notebook per alludere all’animazione.

Ora abbiamo creato il nostro ciclo di volo, il nostro uccello sta attualmente sbattendo le ali ma non sta andando da nessuna parte. Per spostarla sullo schermo, creiamo un’altra animazione keyframe. Questa animazione si sposta l’uccello attraverso lo schermo in orizzontale, mentre anche cambiando la posizione verticale e la scala per consentire l’uccello a meandro attraverso più realisticamente.

Una volta create le nostre animazioni, dobbiamo semplicemente applicarle., Possiamo creare più copie del nostro uccello e applicare diversi tempi di animazione e ritardi. 

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Attraversare il mio hamburger

  • Come visto su: Migliori Agenzia Marchio
  • Visualizzare il codice per le campate e SVG
  • Autore: Steven Roberts

Questa animazione è utilizzato in tutto il web, girando tre righe in croce o icona di chiusura., Fino a poco tempo fa, la maggior parte delle implementazioni sono state realizzate utilizzando elementi HTML, ma in realtà SVG è molto più adatto a questo tipo di animazione – non c’è più bisogno di gonfiare il codice dei pulsanti con più span.

A causa della natura animabile e SVG e del suo DOM navigabile, il codice per realizzare l’animazione o la transizione cambia molto poco – la tecnica è la stessa.

Iniziamo creando quattro elementi, sia che si estendano all’interno di un div o percorsi all’interno di un SVG., Se stiamo usando gli span, dobbiamo usare i CSS per posizionarli all’interno del div; se stiamo usando SVG, questo è già stato risolto. Vogliamo posizionare le linee 2 e 3 al centro – una sopra l’altra – mentre spaziano le linee 1 e 4 uniformemente sopra e sotto, assicurandoci di centrare l’origine della trasformazione.

Faremo affidamento sulla transizione di due proprietà: opacità e rotazione. Prima di tutto, vogliamo sfumare le linee 1 e 4, che possiamo indirizzare usando il selettore :nth-child.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

L’unica cosa che resta da fare è indirizzare le due linee centrali e ruotarle di 45 gradi in direzioni opposte.

Chasing circles

  • Come visto su: Better Brand Agency
  • Visualizza il codice
  • Autore: Steven Roberts

L’icona di caricamento animata è composta da quattro cerchi. I cerchi non hanno riempimento, ma hanno colori a tratti alternati.

Nel nostro CSS, possiamo impostare alcune proprietà di base a tutti i nostri cerchi e quindi utilizzare il selettore :nth-of-type per applicare un trattino-dasharray diverso a ciascun cerchio.,

Successivamente, abbiamo bisogno di creare la nostra animazione keyframe. La nostra animazione è davvero semplice: tutto quello che dobbiamo fare è ruotare il cerchio di 360 gradi. Posizionando la nostra trasformazione al 50% dell’animazione, anche il cerchio ruoterà nella sua posizione originale.

@keyframes preloader { 50% { transform: rotate(360deg); } }

Con la nostra animazione creata, ora dobbiamo solo applicarla ai nostri cerchi. Impostiamo il nome dell’animazione; durata; conteggio iterazione e funzione di temporizzazione. Il ‘facilità-in-out’ darà l’animazione una sensazione più giocoso.,

Al momento, abbiamo il nostro caricatore, ma tutti gli elementi ruotano insieme allo stesso tempo. Per risolvere questo problema, applicheremo alcuni ritardi. Creeremo i nostri ritardi usando un Sass for loop.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }

A causa dei ritardi, il nostro cerchio ora si anima a sua volta, creando l’illusione dei cerchi che si inseguono. L’unico problema con questo è che quando la pagina viene caricata per la prima volta, i cerchi sono statici, quindi iniziano a muoversi, uno alla volta. Possiamo ottenere lo stesso effetto di offset, ma interrompere la pausa indesiderata nella nostra animazione semplicemente impostando i ritardi su un valore negativo.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore