Allo scopo di abbellire il tuo web design, è altamente raccomandato l'aggiunta di animazioni. Le animazioni sono indicate come uno spostamento regolare nello stile dell'elemento. CSS ti consente di aggiungere animazioni a vari elementi con grande facilità.

Quando si applicano animazioni a vari elementi CSS è necessario indicare alcuni frame chiave per l'animazione. IL @KeyFrames la regola specifica che un elemento cambierà il suo stile attuale in quello specificato in un determinato momenti. Inoltre, devi allegare un'animazione a un particolare elemento affinché l'animazione funzioni.

Esistono varie proprietà di animazione CSS che vengono utilizzate allo scopo di aggiungere animazioni a vari elementi CSS, abbiamo discusso di queste proprietà di seguito.

Proprietà di animazione CSS

CSS fornisce varie proprietà di animazione che sono spiegate in dettaglio di seguito.

Name di animazione

Questa proprietà viene utilizzata per definire un nome per @KeyFrames.

Sintassi

Animazione: nessuno | KeyFrameName | iniziale | ereditare;

IL KeyFrameName Il parametro definisce un nome per il frame chiave che desideri allegare a un elemento.

Esempio
Considera l'esempio seguente per capire come funziona questa proprietà.

Html

Ciao mondo

Qui abbiamo definito un file

elemento su cui applicheremo l'effetto animazione.

CSS

P
Font-size: 30px;
Posizione: relativo;
Animazione: animazione;
durata dell'animazione: 5s;

@KeyFrames Animation
da a sinistra: 0px;
a a sinistra: 200px;

Prima di applicare l'effetto di animazione abbiamo prima impostato la dimensione del carattere e la posizione del paragrafo. Più tardi, abbiamo assegnato un nome a KeyFrames e usando la regola @KeyFrames, stiamo definendo che l'animazione farà muovere il paragrafo da 0px a 200px da sinistra.

Si noti che è importante impostare la durata dell'animazione altrimenti non funzionerà.

Produzione

L'animazione funziona correttamente.

durata dell'animazione

Questa proprietà definisce il tempo che un'animazione dovrebbe impiegare per finire un ciclo.

Sintassi

Durata animazione: tempo | iniziale | ereditare;

Il parametro del tempo definisce il tempo dell'animazione.

Esempio
Ecco come è possibile impostare la durata di un'animazione.

Html

Abbiamo semplicemente definito un elemento div.

CSS

div
larghezza: 100px;
Altezza: 100px;
Background-color: Brown;
Posizione: relativo;
Animazione: animazione;
durata dell'animazione: 3s;

@KeyFrames Animation
da a sinistra: 0px;
a a sinistra: 200px;

Oltre allo styling del contenitore Div, abbiamo distinto la durata dell'animazione su 3 sec. Ciò significa che l'animazione continuerà a suonare per 3 secondi.

Produzione

L'animazione viene suonata per 3 secondi.

delay di animazione

Questa proprietà definisce il periodo di attesa prima dell'inizio dell'animazione.

Sintassi

Delay di animazione: tempo | iniziale | ereditare;

Il parametro del tempo definisce il tempo di attesa prima dell'inizio dell'animazione, tuttavia è facoltativo.

Esempio
Supponiamo di voler ritardare l'animazione per 2 secondi, quindi segui il codice di seguito.

CSS

div
larghezza: 100px;
Altezza: 100px;
Background-color: Brown;
Posizione: relativo;
Animazione: animazione;
durata dell'animazione: 5s;
Delay di animazione: 2s;

@KeyFrames Animation
da a sinistra: 0px;
a a sinistra: 200px;

Il codice sopra specifica che il contenitore DIV passerà da 0px a 200 px da sinistra per 5 secondi dopo un periodo di attesa di 2 secondi.

Produzione

L'animazione è stata ritardata per 2 secondi e poi è iniziata come desiderato.

Funzione di animazione

Questa proprietà definisce la curva di accelerazione dell'animazione.

Sintassi

Funzione di animazione: facilità | lineare | facilità in | facilitare | facilità in out | Cubic-Bezier (n, n, n, n);

Tutti i parametri sono spiegati di seguito.

• sollievo: L'animazione si verifica in modo lento lento.
• lineare: L'animazione avrà la stessa velocità dall'inizio alla fine.
• facilità in: L'animazione avrà un inizio lento.
• facilitare: L'animazione avrà un finale lento.
• facilità in out: L'animazione avrà un inizio lento e una fine lenta.
• Cubic-Bezier (N, N, N, N): I valori dell'animazione saranno impostati in modo cubico.

Esempio
L'esempio seguente mostra il parametro di facilità della proprietà in discussione.

CSS

div
Animazione: animazione;
durata dell'animazione: 5s;
Funzione di animazione: facilità;

@KeyFrames Animation
da a sinistra: 0px;
a a sinistra: 200px;

Abbiamo impostato il valore della funzione di intagliazione dell'animazione per facilitare, quindi l'animazione si verificherà in modo lento lento.

Produzione

L'animazione sta giocando in modo lento lento.

animazione-iterazione-conteggio

Questa proprietà definisce quante volte suonerà un'animazione.

Sintassi

Animazione-Iteration-Count: Numero | infinito | iniziale | ereditare;

Il parametro numerico definisce il numero di volte in cui un'animazione verrà riprodotta, nel frattempo, il parametro infinito definisce che l'animazione giocherà infinitamente.

Esempio
Comprendiamo il funzionamento della proprietà dell'animazione-iterazione utilizzando il seguente esempio.

CSS

div
Animazione: animazione;
durata dell'animazione: 5s;
animazione-iterazione-conte: 2;

@KeyFrames Animation
da top: 0px;
a top: 100px;

Il codice sopra definisce che l'animazione farà muovere il contenitore Div da 0px a 100px dalla parte superiore per 5 secondi due volte.

Produzione

L'animazione viene riprodotta due volte come specificato nel codice.

direzione dell'animazione

Questa proprietà definisce la direzione in cui l'animazione si muoverà. Le indicazioni possono essere in avanti, all'indietro o al passaggio di entrambi.

Sintassi

Direzione dell'animazione: normale | Reverse | alternativa | Rilevamento alternativo | Eredità | iniziale;

Tutti i parametri sono spiegati di seguito.

• normale: Questo è un parametro predefinito che suona l'animazione in avanti.
• inversione: Questo parametro riproduce l'animazione nella direzione inversa.
• alternato: Questo parametro riproduce prima l'animazione nella direzione in avanti e poi nella direzione inversa.
• reviso alternativo: Questo parametro riproduce prima l'animazione nella direzione inversa e quindi nella direzione in avanti.

Esempio
L'esempio seguente dimostra il parametro alternativo-reverse della proprietà dell'animazione.

Html

Ciao mondo

Abbiamo creato un'intestazione.

CSS

H1
Colore: marrone;
Posizione: relativo;
Animazione: animazione;
durata dell'animazione: 3s;
animazione-iterazione-conte: infinito;
Direzione dell'animazione: reviso alternativo;

@KeyFrames Animation
da a sinistra: 0px; Colore: Brown;
a a sinistra: 100px; colore: giallo;

Il codice sopra indica che l'intestazione si muoverà infinitamente per 3 secondi da 0px a 100px da sinistra in un cambio di moda alternativo tra i colori marrone e giallo.

Produzione

La proprietà della direzione dell'animazione è stata implementata con successo.

modalità di riempimento di animazione

Questa proprietà definisce lo stile di un elemento nel momento in cui l'animazione non sta giocando. Ciò significa quale stile avrà l'elemento prima dell'inizio dell'animazione, dopo che finisce o entrambi.

Sintassi

MODIO ANIMATION: Nessuno | in avanti | all'indietro | Entrambi | Eredità | iniziale;

Tutti i parametri sono spiegati di seguito.

• nessuno: Questo è un parametro predefinito che dà stile all'elemento prima o dopo l'animazione.
• Avanti: Questo parametro mantiene lo stile di un elemento definito dall'ultimo frame chiave.
• indietro: Questo parametro mantiene lo stile di un elemento definito dal primo frame chiave e si aggrappa a questo stile durante il tempo di ritardo dell'animazione.
• Entrambi: Questo parametro passa tra i parametri in avanti e indietro.

Esempio
Vediamo come funziona il parametro in avanti seguendo l'esempio seguente.

Html

Abbiamo semplicemente creato un contenitore div.

CSS

div
larghezza: 100px;
Altezza: 100px;
Background-color: Brown;
Posizione: relativo;
Animazione: animazione;
durata dell'animazione: 3s;
Modice di pila di animazione: attaccanti;

@KeyFrames Animation
da a sinistra: 0px;
a a sinistra: 100px; Background-color: Yellow;

Nel codice sopra, abbiamo impostato la proprietà in modalità di riempimento dell'animazione sul parametro inoltra, pertanto, il contenitore Div manterrà lo stile specificato nell'ultimo frame chiave quando l'animazione viene fermata e non suona.

Produzione

Il contenitore Div ha un colore di sfondo giallo quando l'animazione viene fermata e non suona.

stato di animazione-play

Questa proprietà definisce se l'animazione viene eseguita o fatta in pausa.

Sintassi

Anay-Play-State: Running | pausa | Eredità | iniziale;

IL corsa Il parametro è un valore predefinito che specifica che l'animazione sta eseguendo, nel frattempo il in pausa Il parametro specifica che l'animazione è messa in pausa.

Esempio
Supponiamo di voler mettere in pausa un'animazione usando la proprietà dell'animazione-play-stato. Ecco come lo fai.

CSS

div
Animazione: animazione;
durata dell'animazione: 3s;
Anay-Play-State: pausa;

@KeyFrames Animation
da a sinistra: 0px;
a a sinistra: 100px;

Il codice sopra specifica che l'animazione verrà messa in pausa.

Produzione

L'animazione è stata messa in pausa con successo.

animazione

Questa proprietà è una proprietà stentata per tutte le proprietà di cui sopra.

Sintassi

animazione: ;

Esempio
Considera l'esempio seguente per comprendere la proprietà dell'animazione.

CSS

div
Animazione: animazione 3s Infinite Alternate;

@KeyFrames Animation
da a sinistra: 0px; Background-color: Brown;
a a sinistra: 200px; Background-color: Yellow;

Stiamo specificando che l'animazione giocherà infinitamente per 3 secondi in modo alternativo.

Produzione

La proprietà dell'animazione funziona correttamente.

Conclusione

Le animazioni sono indicate come un cambiamento graduale nello stile di un elemento. CSS fornisce varie proprietà di animazione che sono le seguenti: animazione, durata dell'animazione, delay di animazione, funzione di infe-animazione, conteggio dell'animazione, direzione dell'animazione, modalità di pilotaggio dell'animazione, stato di animazione-animazione, e animazione. Tutte queste proprietà vengono utilizzate per specificare il comportamento dell'effetto di animazione applicato su vari elementi HTML. In questa guida, tutte queste proprietà sono spiegate con l'aiuto di esempi pertinenti.