Animazione di oggetti fluida solo con CSS (5 esempi).

e basta! Vediamo come appare nella realtà.

Innanzitutto, il markup HTML. È molto semplice perché stiamo lavorando solo con un elemento nella pagina.

1	<div class="toSmallWidth">

Ed ecco cosa c'è nel file di stile:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margine: 20px auto; /* margini superiore e inferiore di 20px e allineamento centrale */ sfondo: rosso /*sfondo rosso per il blocco*/ altezza: 100px; /*altezza blocco 100px*/ larghezza: 800px /*larghezza iniziale 800px*/-nome-animazione-webkit: animWidthSitehere; -webkit-animazione-durata: 5s; /* proprietà con prefisso per browser Chrome, Safari, Opera */ nome-animazione : animWidthSitehere; /* specifica il nome dei fotogrammi chiave (situati sotto) */ animazione-durata: 5s /*imposta la durata dell'animazione*/ } /* fotogrammi chiave prefissi per browser Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere( da (larghezza: 800px;) a (larghezza: 100px;)) @keyframes animWidthSitehere( da (larghezza: 800px;) /*primo fotogramma chiave in cui la larghezza del blocco è 800px*/ a (larghezza: 100px;) /*ultimo fotogramma chiave in cui la larghezza del blocco è 100px*/ }

Come puoi vedere, abbiamo specificato solo il primo e l'ultimo fotogramma chiave e tutti quelli intermedi sono stati "costruiti" automaticamente.

Ecco la tua prima animazione CSS3. Per consolidare le conoscenze acquisite, creare un documento HTML e un file CSS, e inserire (o meglio, digitare a mano) il codice dell'esempio lì. Allora capirai sicuramente tutto. Quindi prova a fare lo stesso con l'altezza del blocco (dovrebbe diminuire in altezza) per ancorare il materiale.

3. Esempi di animazione CSS3 più avanzati

Sopra, hai imparato quanto sia facile creare animazioni CSS3. Se hai provato a farlo da solo, hai già capito l'intero processo e ora vuoi sapere come creare un'animazione più complessa e bella. E può davvero essere creato. Di seguito ci sono 3 lezioni in cui l'animazione viene creata allo stesso modo dell'esempio sopra.

3 lezioni di animazione CSS (trasformazioni)

Le lezioni ti aiuteranno a capire ancora meglio l'animazione CSS. La cosa principale è provare a ripetere ciò che vedi nelle lezioni. O almeno prova a cambiare i valori delle proprietà e guarda cosa succede, poi diventerai meno spaventato dai CSS.

L'abbiamo visto di recente transizioni- è solo un modo animazioni proprietà di stile da iniziale prima di finale stati.

Quindi lo sono le transizioni in CSS specifico tipo di animazione, dove:

• ci sono solo due stati: inizio e fine;
• l'animazione non è in loop;
• gli stati intermedi sono controllati solo da una funzione del tempo.

Ma cosa succede se vuoi:

• avere il controllo su intermedio stati?
• ciclo continuo animazione?
• crea diversi tipi di animazioni per uno elemento?
• animare una proprietà specifica solo su metà modo?
• imitare varie funzioni temporali per diverse proprietà?

L'animazione in CSS consente tutto questo e molto altro.

Un'animazione è come un mini-film in cui tu, come regista, dai istruzioni (regole di stile) ai tuoi attori (elementi HTML) per scene diverse (fotogrammi chiave).

Proprietà di animazione

Come la transizione , la proprietà dell'animazione è abbreviato per pochi altri:

• nome-animazione : nome dell'animazione;
• animazione-durata: quanto dura l'animazione;
• animation-timing-function: come vengono calcolati gli stati intermedi;
• animation-delay: l'animazione inizia dopo un po' di tempo;
• animation-iteration-count : quante volte deve essere eseguita l'animazione;
• direzione-animazione : se il movimento va nella direzione opposta oppure no;
• animation-fill-mode : quali stili vengono applicati prima dell'inizio e dopo la fine dell'animazione.

Esempio veloce

Per animare il pulsante di download, puoi scrivere un'animazione rimbalzare:

@keyframes bouncing( 0% (in basso: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% (in basso: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); ) ) .loading-button ( animazione: rimbalzo di 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinito si alternano entrambi;)

Per prima cosa dobbiamo scrivere l'effettiva animazione di rimbalzo usando @keyframes e nominarla .

ero solito abbreviato proprietà di animazione e includeva tutte le opzioni possibili:

• nome-animazione: rimbalzante (come il nome del fotogramma chiave)
• durata dell'animazione: 0,5 secondi (mezzo secondo)
• animazione-tempo-funzione: cubic-bezier(0.1,0.25,0.1,1)
• animazione-ritardo: 0s (nessun ritardo)
• conteggio-iterazione-animazione: infinito
• direzione-animazione: alternativa (va avanti e indietro)
• animazione-fill-mode: entrambi

@fotogrammi chiave

Prima di applicare l'animazione agli elementi HTML, è necessario scrivere l'animazione usando i fotogrammi chiave. In generale, i fotogrammi chiave sono ciascuno passaggio intermedio nell'animazione. Sono definiti mediante percentuali:

• 0% - primo passaggio di animazione;
• 50% - passo a metà dell'animazione;
• 100% è l'ultimo passaggio.

Puoi anche utilizzare le parole chiave da e verso invece di 0% e 100% rispettivamente.

Puoi definire tutti i fotogrammi chiave che desideri, ad esempio 33%, 4% o anche 29,86%. In pratica ne scriverai solo alcuni.

Ogni fotogramma chiave lo è regola CSS, il che significa che puoi scrivere le proprietà CSS come al solito.

Per definire un'animazione, scrivi semplicemente la parola chiave @keyframes con essa nome:

@keyframes around ( 0% ( a sinistra: 0; in alto: 0; ) 25% ( a sinistra: 240px; in alto: 0; ) 50% ( a sinistra: 240px; in alto: 140px; ) 75% ( a sinistra: 0; in alto: 140px ; ) 100% ( a sinistra: 0; in alto: 0; ) ) p ( animazione: circa 4s lineare infinito; )

Si noti che l'inizio 0% e la fine 100% contengono le stesse regole CSS. Ciò garantisce che l'animazione si ripeta perfettamente. Poiché il contatore di iterazioni è impostato su infinito, l'animazione passerà da 0% a 100% e quindi immediatamente indietro allo 0% e così via all'infinito.

nome-animazione

Nome almeno viene utilizzata l'animazione due volte:

• in scrivere animazioni con @keframes ;
• in uso animazioni utilizzando la proprietà animation-name (o tramite la proprietà scorciatoia di animazione).

@keyframes qualunque ( /* ... */ ) .selector ( animation-name: qualunque; )

Come i nomi delle classi CSS, i nomi delle animazioni possono includere solo:

• lettere (a-z);
• numeri (0-9);
• carattere di sottolineatura (_);
• trattino (-).

Il nome non può iniziare con un numero o due trattini.

durata dell'animazione

Come la durata della transizione, la durata dell'animazione può essere impostata su secondi(1s) o millisecondi(200 ms).

Selettore ( durata animazione: 0,5 s; )

Il valore predefinito è 0s, il che significa nessuna animazione.

funzione di temporizzazione dell'animazione

Simile alle funzioni di temporizzazione per le transizioni, possono essere utilizzate le funzioni di temporizzazione per l'animazione parole chiave, come linear , easy-out o può essere definito con arbitrario curve di Bézier.

Selettore (funzione di temporizzazione dell'animazione: facilità-in-uscita; )

Valore predefinito: facilità .

Poiché l'animazione in CSS utilizza i fotogrammi chiave, puoi impostare lineare funzione del tempo e simulare specifica curva di Bezier definendo molti molto specifici fotogrammi chiave. Dai un'occhiata a Bounce.js per animazioni all'avanguardia.

animazione-ritardo

Come per il ritardo di transizione, è possibile impostare il ritardo dell'animazione su secondi(1s) o millisecondi(200 ms).

Il valore predefinito è 0s, il che significa nessun ritardo.

Utile quando si includono più animazioni in serie.

A, .b, .c ( animazione: rimbalzo di 1 s; ) .b ( animazione-ritardo: 0,25 s; ) .c ( animazione-ritardo: 0,5 s; )

conteggio delle iterazioni dell'animazione

Per impostazione predefinita, viene riprodotta solo l'animazione una volta(valore 1). È possibile impostare tre tipi di valori:

• numeri interi come 2 o 3;
• numeri frazionari, come 0,5, che riprodurranno solo metà dell'animazione;
• la parola chiave infinite, che ripeterà l'animazione all'infinito.

.selector ( conteggio-iterazione-animazione: infinito; )

direzione dell'animazione

La proprietà di direzione dell'animazione definisce in che ordine vengono letti i fotogrammi chiave.

• normale : inizia da 0%, termina con 100%, ricomincia da 0%.
• reverse : inizia al 100%, termina allo 0%, ricomincia al 100%.
• alternato : inizia da 0%, sale fino a 100%, torna a 0%.
• alternato-inverso: inizia al 100%, passa allo 0%, torna al 100%.

Questo è più facile da immaginare se il contatore di iterazioni dell'animazione è impostato su infinite .

modalità di riempimento dell'animazione

La proprietà animation-fill-mode determina cosa succede davanti inizio animazione e dopo il suo completamento.

Quando si determina personale chiave puoi specificare regole CSS, che verrà applicato in diversi passaggi dell'animazione. Ora queste regole CSS possono viso con coloro che già applicato agli elementi animati.

animation-fill-mode ti consente di dire al browser se stili di animazione anche dovrebbe applicarsi al di fuori dell'animazione.

Immaginiamo pulsante, che è:

• rosso predefinito;
• diventa blu all'inizio dell'animazione;
• e alla fine verde quando l'animazione è completa.

Ciao cari lettori. In questo giorno, parliamo di una cosa piuttosto interessante come l'animazione CSS. Cioè, questa animazione di elementi viene eseguita solo con l'aiuto di stili e qui non vengono utilizzati script.

Come puoi vedere, qui c'è un attributo : passa il mouse, che cambia lo stile di sfondo al passaggio del mouse, in alcuni esempi dovrebbe essere obbligatorio.

Cambia uniformemente il colore di un elemento al passaggio del mouse usando la transizione

#scatola1 (
margine inferiore: 5px;
colore di sfondo: #ccc;

imbottitura: 10px
allineamento testo: centro;
larghezza: 200px
altezza: 100px;

rientro testo: 0px;
bordo: 1px solido #888;
-transizione moz: colore di sfondo 0,8 s 0,1 s facilità;
-o-transizione: colore di sfondo 0,8 s 0,1 s facilità;
-transizione webkit: colore di sfondo 0.8s 0.1s facilità;
cursore: puntatore;)

#scatola1 : passa il mouse {
colore di sfondo: #97CE68;
colore: #333;
}

Come puoi vedere, abbiamo ottenuto una tale animazione usando l'attributo transizione. Qui puoi modificare la velocità dell'animazione in secondi, in questo caso ci vogliono 0,8 secondi prima che il colore cambi completamente al passaggio del mouse e 0,1 secondi prima che l'animazione venga attivata dopo aver spostato il mouse e aver rimosso il cursore. (Scusa per il puzzle :-)) Questo valore può essere modificato secondo necessità.

Il colore di sfondo al passaggio del mouse è impostato dall'attributo : passa il mouse, qui è obbligatorio, altrimenti l'animazione non funzionerà.

Ridimensionamento di un elemento

#scatola2 (
margine inferiore: 5px;
colore di sfondo: #ccc;
colore: #333;

imbottitura: 10px
allineamento testo: centro;
larghezza: 200px
altezza: 100px;

rientro testo: 0px;
bordo: 1px solido #888;
-moz-transizione: tutti gli 1 s lineari;
-o-transizione: tutti gli 1s lineari;
-transizione webkit: tutti gli 1s lineari;
cursore: puntatore;)

#scatola2 : passa il mouse {
colore di sfondo: #97CE68;
colore: #000;
larghezza: 150px
altezza: 50px;
}

In questo esempio, abbiamo ottenuto un ridimensionamento uniforme del blocco al passaggio del mouse. Il valore predefinito è 200 per 100 e il valore al passaggio del mouse è 150 per 50, che è impostato dall'attributo : passa il mouse.

Qui puoi anche cambiare il blocco solo in larghezza o altezza, devi solo farlo : passa il mouse eliminare larghezza:- il blocco cambia solo in altezza, altezza:— il blocco cambia solo in larghezza.

Puoi anche modificare il tasso di cambio. In questo caso è 1s.

Torsione dell'oggetto

#scatola3 (
margine inferiore: 5px;
colore di sfondo: #ccc;
colore: #333;

imbottitura: 10px
allineamento testo: centro;
larghezza: 200px
altezza: 100px;

rientro testo: 0px;
bordo: 1px solido #888;
-moz-transizione: tutti gli 1s 0.1s facilitano;
-o-transizione: tutti 1s 0.1s accomodamento;
-transizione webkit: tutti gli 1s 0.1s facilitano;
cursore: puntatore;)

#box3:passa il mouse(
colore di sfondo: #97CE68;
colore: #000;
-trasformazione webkit: ruota (360 gradi);
-moz-trasforma: ruota (360 gradi);
-o-trasforma: ruota (360 gradi);
}

Il twist è fatto trasformare e transizione. In questo caso, l'oggetto ruota in senso orario di 360 gradi alla velocità di un secondo. Se vuoi che il blocco ruoti in senso antiorario, trasformare il valore deve essere impostato su - (meno). Naturalmente, il grado di turnover può essere modificato.

Ingrandimento e riduzione fluidi di un oggetto

#scatola4 (
margine inferiore: 5px;
colore di sfondo: #ccc;
colore: #333;
imbottitura: 10px
allineamento testo: centro;
larghezza: 200px
altezza: 100px;

rientro testo: 0px;
bordo: 1px solido #888;
-moz-transition: allentamento di tutti i 3 secondi;
-o-transizione: allentamento di tutti i 3 secondi;
-transizione-webkit: tutti e 3 i allentamenti;
cursore: puntatore;)

#box4:passa il mouse(
colore di sfondo: #97CE68;
colore: #000;
-webkit-transform: scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
}

In questo esempio, il blocco viene gradualmente aumentato di 2 volte. Questo valore è impostato trasforma: scala(2). Se si imposta il valore su 1,5, il blocco verrà ingrandito di 1,5 volte.

Allo stesso modo, puoi ridurre le dimensioni blocco, ad esempio, impostare il valore su 0,5.

Spostamento graduale del blocco verso il basso

#scatola5 (
margine inferiore: 5px;
colore di sfondo: #ccc;
colore: #333;
imbottitura: 10px
allineamento testo: centro;
larghezza: 200px
altezza: 100px;

rientro testo: 0px;
bordo: 1px solido #888;
-moz-transition: tutti gli 1 secondi di facilità in entrata;
-o-transizione: tutti gli 1 secondi di facilità in entrata e uscita;
-transizione-webkit: tutti gli 1 secondi sono facilmente entrati e usciti;
cursore: puntatore;)

#box5:passa il mouse(
colore di sfondo: #97CE68;
colore: #000;
-trasformazione-webkit: translate(0.50px);
-moz-transform: translate(0.50px);
-o-transform: translate(0,50px);
}

Qui lo spostamento è espresso in pixel. In questo caso (0,50px). Puoi anche forzare il blocco a salire con questo valore di 0,-50px. O diagonalmente verso il basso di 50px,50px. In una parola, il blocco può essere spostato ovunque.

Questo è fondamentalmente tutto ciò che volevo dire. No, non tutti :-) Ho dimenticato di ricordarti che questa animazione CSS può essere applicata a qualsiasi oggetto del sito: immagini, testo, intestazioni, icone, ecc. Per i link un viraggio uniforme è perfetto, secondo me è molto bello. :-)

Eppure, queste informazioni sono state condivise con noi dal sito shpargalkablog.ru. Per il quale molte grazie a lui.

Adesso è tutto sicuro :-) A presto, amici.

Ciao a tutti. Recentemente mi sono imbattuto in una serie di video tutorial molto utili e interessanti sull'argomento " Animazione CSS". Ma questa è sfortuna, tutti i video erano in inglese e, probabilmente, non tutti i designer di layout conoscono l'inglese a un livello sufficiente per capire e assimilare tutte le informazioni necessarie. Pertanto, ho deciso di tradurre queste lezioni per te (più precisamente, per fare una traduzione gratuita). Non c'è bisogno di ringraziare. Così:

1. Animazione CSS. Introduzione + proprietà di transizione(Questo articolo)
2. Animazione CSS. Fotogrammi chiave - in arrivo
3. Quando e perché usare le animazioni CSS? - Prossimamente

Che cos'è l'animazione CSS?

Prima di dirti come fare le animazioni CSS e perché sono necessarie, vorrei iniziare spiegandoti, che è successoAnimazione CSS, definire qualcosa.

Le animazioni sul web hanno due idee principali. La prima idea è far rivivere qualcosa. Sei come il dottor Frankenstein. Hai un mostro senza vita e gli dai vita. Secondo - visualizzazione del movimento. E la parola chiave qui è “movimento”.

Come animare?

Ci sono due strumenti principali nei CSS con i quali possiamo spostare gli elementi in una pagina web. Il primo (di cui parleremo più avanti oggi) è la proprietà transizione. Prima di tutto, è con il suo aiuto che creiamo animazioni in CSS. Il secondo strumento è la proprietà animazione abbinata a fotogrammi chiave(@fotogrammi chiave - fotogrammi chiave). Tratteremo questo strumento in modo più dettagliato nel prossimo tutorial, ma ora daremo un'occhiata alla proprietà di transizione CSS. E poi parleremo di cosa animare nella pagina (quando l'utente ne ha bisogno) e cosa non animare (quando l'animazione sembra stupida e inappropriata), in base all'esperienza dell'utente (UX - user experience).

Proprietà di transizione CSS - opzioni e valori

Sintassi

Per prima cosa, vediamo come viene letta questa proprietà e comprendiamo la sua sintassi. Scriviamo questa proprietà in questo modo:

transizione: [proprietà] [durata] [funzione di temporizzazione] [ritardo] ;

transizione: altezza 1s allentamento 0,2s ;

Assegniamo questa proprietà all'elemento che vogliamo animare. Questo articolo diventa liscio transizione(o fare un passo) tra diversi dei suoi stati (ad es. altezza 100px e altezza 200px). E come sarà questo transizione(dalla transizione inglese), dipenderà dai parametri che abbiamo impostato per esso.

Il primo parametro (valore) della proprietà di transizione è un altro proprietà elemento animato (ad esempio, altezza).

Il secondo parametro è la durata (durata) dell'animazione, ovvero quanto tempo impiegherà l'elemento per passare da uno stato all'altro (ad esempio, 2s o 2000ms).

Il terzo parametro è funzione di temporizzazione [tempismofunzione] (funzione di allentamento [ allentamentofunzione]). Come si distribuisce l'intensità dell'animazione nel tempo. Ad esempio, un'animazione potrebbe iniziare bruscamente, quindi rallentare e terminare la transizione senza intoppi alla fine. Può essere utilizzato come parole chiave (ad esempio sollievo,sollievo-in-fuori,lineare) e le funzioni del cubo di Bezier (ad esempio, cubo-bezier(0.17, 0.67, 0.83, 0.67)). Puoi impostare facilmente e comodamente un cubo Bezier su questa risorsa http://cubic-bezier.com , così come la funzione passi per creare un'animazione fotogramma per fotogramma (passo dopo passo).

E infine, il parametro ritardo. Il ritardo dell'animazione è la quantità di tempo che occorre attendere prima che l'animazione (nel nostro caso, la transizione) inizi.

Esempio di animazione di transizione CSS

Diamo un'occhiata a questo esempio di animazione CSS:

transizione: opacità 300 ms facilità in entrata e uscita 1s;

Qui animiamo solo la proprietà opacità(opacità). Ciò significa che se l'elemento che andremo ad animare ha altre proprietà, come altezza, larghezza o colore, e anche se queste proprietà differiscono nei diversi stati dell'elemento, solo la proprietà opacità avrà una transizione graduale (animazione) . Capisci?

Al posto di una proprietà specifica, puoi anche utilizzare la parola chiave " tutto". Ciò significa che animiamo assolutamente tutte le proprietà dell'elemento che sono state modificate nel nuovo stato dell'elemento (non solo l'opacità) e che possono essere animate. Perché, come sai, non tutte le proprietà possono essere animate. Ma ne parleremo più avanti.

Il secondo parametro ( 300 SM) ci dice che l'animazione durerà solo 300 millisecondi. Cioè, l'elemento apparirà rapidamente o si dissolverà rapidamente, a seconda dei valori delle proprietà nei suoi due stati.

Funzione di temporizzazione ( sollievo-in-fuori) poiché il terzo parametro renderà l'inizio e la fine dell'animazione più fluidi.

Ritardo ( 1 S) indica quanto deve essere in ritardo l'animazione prima che si attivi.

In generale, questa è la formula per come registreremo l'animazione di transizione. Questa è la sintassi. Puoi, se non altro, aggiungere più di una transizione [proprietà] per un elemento. Ad esempio, puoi animare i cambiamenti nell'altezza e nella larghezza di un elemento con parametri diversi. Per fare ciò, nella proprietà di transizione, invece di un punto e virgola alla fine, basta inserire una virgola e scrivere i parametri per un'altra proprietà. E non dimenticare di mettere un punto e virgola alla fine in seguito per farlo funzionare.

Cosa può essere animato in CSS?

Finora abbiamo discusso solo della sintassi della proprietà di transizione. Ora parliamo delle proprietà, quali possiamo animare e quali no. Perché ci sono alcune cose che semplicemente non hanno senso da animare e alcune proprietà semplicemente non possono essere animate.

Proprietà animate

Prendi, ad esempio, proprietà come:

1. dimensione del font;
2. colore di sfondo;
3. larghezza;
4. sinistra (quanto lontano dal lato sinistro l'elemento può essere spostato [posizionato]...

Ovviamente, ha senso animare queste proprietà. Se modifichi i loro valori, cambierà visivamente l'elemento. Se modifichi la dimensione del carattere da, ad esempio, 14px a 28px, vedrai che il carattere aumenta gradualmente e c'è un'animazione che dura per un po'. L'animazione ha sempre senso se il valore delle proprietà è un valore chiaro (il più delle volte numerico). Se aumenti la dimensione del carattere a 100px, vedrai chiaramente le lettere crescere. Si può anche osservare un cambiamento graduale nel colore di sfondo [perché il colore sul web ha un codice numerico, ad esempio rosso RGB(255,0,0)]. Queste proprietà sono animate.

In generale, ricorda, se immagini che sia animato, allora può essere animato. La maggior parte delle volte questo funziona.

Proprietà che non sono animate

Ed ecco un elenco di proprietà che non possono essere animate (esempio):

1. Schermo;
2. famiglia di font;
3. posizione...

Questi sono alcuni che ho preso come esempio in modo da poter avere un'idea della differenza tra le proprietà CSS animate e non animate.

Mettiti in mostra. Riesci a immaginare come il cambiamento tra " Schermo:bloccare;" e " Schermo:in linea-bloccare;"? Come può l'aspetto di un elemento cambiare dolcemente tra " posizione:parente;" e " posizione:assoluto;"? No, ovviamente l'elemento avrà un aspetto diverso quando queste proprietà vengono modificate. Ma come puoi immaginare transizione? Non puoi farlo. Destra? Non puoi immaginare il carattere che gira Helvetica in carattere Georgia, ogni lettera, semplicemente non funzionerà. Puoi modificare questi caratteri, ma cambieranno bruscamente, non si verificherà alcuna animazione.

Performance di animazione in CSS

In generale, molte proprietà si animano, ma altre no. Ora decidiamo quali delle proprietà animate sono migliori per l'animazione e quali sono peggiori. Si tratta di prestazioni. Abbiamo toccato il tema delle prestazioni perché le animazioni richiedono molte risorse.

In generale, ecco le cose che sono più adatte per l'animazione:

1. Posizionamento sulla pagina
2. Ridimensionamento
3. Rotazione
4. Trasparenza

Inoltre, i primi tre elementi di questo elenco sono tutti parametri della proprietà di trasformazione (traduci, ridimensiona, ruota). Il posizionamento avviene lungo gli assi X e Y.

Se decidi di animare qualcos'altro, corri il rischio di non ottenere una transizione fluida e fluida a 60 fps. Paul Lewis e irlandese

E questo è esattamente ciò che ci interessa quando parliamo di performance di animazione. In generale, le proprietà più adatte per l'animazione sono trasformare eopacità. Quando si anima qualsiasi altra cosa, gli fps dell'animazione possono scendere ben al di sotto di 60 fps.

Riassumiamo questo punto come segue. Cerca di evitare di ridisegnare elementi sulla pagina Web e di animare elementi difficili da renderizzare per il browser (come le ombre).

Come creare animazioni in CSS?

Ora scopriamo come avviare l'animazione. Cosa è necessario fare per rendere animato l'elemento. In altre parole, come fare animazionecss.

Non è difficile e ci sono molti modi diversi per farlo. Ma ce ne sono 2 principali che devi padroneggiare senza fallo. Il primo modo è animazione al passaggio del mouse dell'elemento(pseudo-classe: passaggio del mouse). Passa il mouse su un elemento e l'animazione viene attivata. In questo modo puoi animare l'elemento stesso o uno qualsiasi dei suoi elementi figlio. Poi ti mostrerò come funziona. Il secondo modo è cambiare la classe di un elemento. Cioè, hai un elemento ordinario, cambi (o aggiungi) la sua classe a una classe che ha stili completamente diversi. Se aggiungi una classe, l'animazione si verificherà e se rimuovi la classe, l'animazione verrà invertita. Questo è un buon modo per animare menu o menu a discesa.

Epilogo

Abbiamo coperto tutto ciò di cui abbiamo bisogno per creare animazioni CSS pure. Molto presto analizzeremo esempi pratici e, poco dopo, esempi molto interessanti.

Hai letto fino alla fine?

questo articolo è stato utile?

Non proprio

Cosa non ti è piaciuto esattamente? L'articolo era incompleto o non veritiero?
Scrivi nei commenti e ti promettiamo di migliorare!