Come impostare i fotogrammi chiave di animazione CSS

La lingua HTML fornisce la struttura della pagina Web e CSS fornisce la progettazione e la formattazione di tale applicazione. Questa combinazione ti consente anche di aggiungere animazione, poiché gli elementi animati sembrano più attraenti rispetto agli elementi statici. Permette anche a un elemento di cambiare gradualmente il suo stile.

Questo articolo guiderà come possiamo applicare l'animazione agli elementi. Quindi, iniziamo!

Cosa sono i keyframe di animazione CSS?

Per fare l'animazione, dobbiamo legare l'animazione all'elemento HTML. A tale scopo, usa la parola chiave "@KeyFrames"Seguito dal nome dell'animazione. Questo componente specifica l'inizio e la fine dell'animazione.

Come impostare i fotogrammi chiave di animazione CSS?

Per impostare i frame dei tasti di animazione in CSS, esamineremo due esempi.

Esempio 1

Per l'impostazione dei frame dei tasti di animazione in CSS, eseguire i seguenti passaggi:

• • Aggiungi un nome di classe "Main-Div".
  • All'interno del div, aggiungi un altro div con il nome di classe "img-peng".
  • All'interno di questo div img-peng, aggiungi per posizionare l'immagine. Questo tag ha tre attributi, il "src"Attributo per fornire il percorso dell'immagine,"Al"È il testo alternativo che viene aggiunto se l'immagine non viene visualizzata e il"larghezza"Attributo per fornire la larghezza dell'immagine.

Html

CSS

.main-div
larghezza: 90%;
Altezza: 90px;
Background-color: RGB (67, 66, 87);
Margine: 20px Auto;
imbottitura: 10px;

In CSS, il “.Main-Div"Viene aggiunto per accedere alla classe Div. Le proprietà applicate ad esso sono spiegate di seguito:

• • "larghezza"Il valore della proprietà definisce la larghezza del div.
  • "altezza"La proprietà viene utilizzata per impostare l'altezza del div.
  • "colore di sfondo"La proprietà applica il colore allo sfondo dell'elemento.
  • "margine"È impostato come"20px Auto", Che indica lo spazio dall'alto e dal basso e auto significa uguale spazio da sinistra e destra.
  • "imbottitura"Il valore della proprietà è assegnato come 10px, che applica lo spazio attorno al contenuto dell'elemento.

Stile Classe IMG-Peng

.img-peng
larghezza: 50px;
Altezza: 100px;
Posizione: relativo;
Animazione: Shake;
durata dell'animazione: 2s;
Funzione di animazione: 2S;
animazione-iterazione-conte: infinito;

IL ".img-peng"Viene utilizzato per accedere alla classe Div, menzionata nel file HTML sopra. Questo elemento Div è disegnato con le proprietà discusse di seguito:

• • "larghezza"Il valore della proprietà viene utilizzato per impostare la larghezza dell'elemento.
  • "altezza"Il valore della proprietà viene utilizzato per impostare l'altezza dell'elemento.
  • "posizione"Alla proprietà è assegnato il valore"parente", Il che significa che sarà posizionato rispetto alla sua posizione normale.
  • "animazione"Il nome è dato come"scuotere". Tuttavia, puoi nominare l'animazione in base al requisito.
  • "durata dell'animazione"Rappresenta la durata dell'animazione, che è 2 secondi.
  • "Funzione di animazione"Viene assegnato un valore di 2s che significa in 2 secondi, l'animazione è completata.
  • "animazione-iterazione-conteggio"È impostato come infinito, il che significa che questa animazione si verificherà in tempo infinito.

Definisci @KeyFrames con da e verso le parole chiave

@KeyFrames Shake
da
Top: 50px;

A
margine-bottom: 200px;

La descrizione dei frame chiave di animazione impostata sull'immagine è elencata di seguito:

• • "@KeyFrames Shake"Si riferisce alla scissione del nome dell'animazione seguita dalla parola chiave @KeyFrames. All'interno di questa regola, è specificato il comportamento dell'animazione.
  • All'interno delle sue staffe ricci, il "da" E "A"Parole chiave specificano intervalli diversi per definire il comportamento dell'animazione.
  • IL "superiore"Alla proprietà viene assegnato il valore di 50px, il che significa che l'animazione inizia da 50px dalla parte superiore dello schermo e continua a 200px in basso.

Di conseguenza, vedrai il seguente output:

Ora, lascia che l'animazione si comporti diversamente a intervalli diversi. Per fare ciò, utilizzare le percentuali di animazione in @KeyFrames.

Specifica @KeyFrames con percentuali

@KeyFrames Shake
0%
A sinistra: -50px;

25%
A sinistra: 50px;

50%
A sinistra: -25px;

75%
A sinistra: 25px;

100%
A sinistra: 10px;

Quindi, la descrizione dello snippet di codice sopra è menzionata qui:

• • I valori percentuali 0%, 25%, 50%, 75%e 100%rappresentano l'animazione a intervalli diversi.
  • Inoltre, allo 0%, lo spazio a sinistra dell'immagine sarà "-50px". Al 25%, lo spazio a sinistra sarà "50px". Al 50%, lo spazio a sinistra sarà "-25px". Al 75%, lo spazio sinistro sarà "25px"E quando l'animazione completa (100%), lo spazio sinistro sarà"10px".

Il codice sopra visualizza la seguente animazione:

Facciamo un altro esempio per vedere come possiamo impostare animazioni sulle immagini.

Esempio 2

In HTML, aggiungi un nome di classe "pagina principale". All'interno di questo elemento, posizionare altri due tag DIV con le classi "Cloud1" E "Cloud2"Rispettivamente.

Html

CSS

corpo
Margine: 0;
imbottitura: 0;

In CSS, assegneremo le seguenti proprietà CSS all'elemento corporeo:

• • "margine"Proprietà come 0 non specifica spazio attorno all'elemento.
  • "imbottitura"Proprietà con il valore 0 non specifica spazio attorno al contenuto dell'elemento.

Stile Main-Page Div

.pagina principale
Immagina di sfondo: URL (/Images/Wolf Night.png);
Ripeat background: no-ripetizione;
Size di sfondo: copertina;
Altezza: 100VH;
Posizione: relativo;
Overflow: nascosto;

Qui:

• • ".pagina principale"Viene utilizzato per accedere alla classe Div.
  • "immagine di sfondo"Alla proprietà è assegnato il valore"URL (/Images/Wolf Night.PNG)"Dove le immagini sono la cartella che contiene l'immagine lupo-notte.png.
  • "Ripeat di sfondo"Alla proprietà è assegnato il valore"no-ripeat, il che significa che l'immagine verrà visualizzata una volta.
  • "Size di sfondo"È impostato come"copertina"Per riempire l'intero elemento Div.
  • "altezza"È 100vh che è il 100% dell'altezza del vista.
  • "posizione"Come parente imposta la posizione dell'immagine rispetto alla sua posizione corrente.
  • "overflow"Il valore della proprietà è impostato come nascosto per nascondere la parte dell'immagine che è troppo grande per adattarsi al contenitore.

Stile Cloud1 Classe

.cloud1
Immagina di sfondo: URL (/Images/Cloud.png);
Size di background: contenere;
Ripeat background: no-ripetizione;
Posizione: assoluto;
Top: 100px;
larghezza: 500px;
Altezza: 300px;
Animazione: cloudanimation1;
Durata animazione: 70s;
animazione-iterazione-conte: infinito;

La classe Div Cloud1 viene applicata con le seguenti proprietà spiegate:

• • ".Cloud1"Viene utilizzato per accedere alla classe Div Cloud1.
  • "immagine di sfondo"La proprietà è impostata come URL (/Images/Cloud.png), dove le immagini sono la cartella contenente la nuvola di immagine.png.
  • "Size di sfondo"Con il valore"contenere"Assicura la visibilità dell'immagine.
  • "Ripeat di sfondo"Proprietà con il valore impostato come"no-ripeat"Visualizza l'immagine come non ripetuta.
  • "posizione"Come assoluta posiziona l'immagine relativa all'elemento del suo genitore.
  • "superiore"La proprietà imposta l'immagine a 100px dall'alto.
  • "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento div su 500px.
  • "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento div su 300px.
  • "animazione"Viene assegnato il nome cloudanimation1.
  • "durata dell'animazione"Rappresenta la durata dell'animazione, che è 70 secondi.
  • "animazione-iterazione-conteggio"Viene assegnato il valore infinito, che iterirà i tempi di animazione infiniti.

Finora abbiamo applicato le proprietà CSS alla classe DAV Main-Page e Cloud1. Ora, nella prossima sezione, modelleremo la prossima classe Div denominata Cloud2.

Stile Cloud2 Classe

.cloud2
Immagina di sfondo: URL (/Images/Cloud.png);
Size di background: contenere;
Ripeat background: no-ripetizione;
Posizione: assoluto;
Top: 50px;
larghezza: 200px;
Altezza: 300px;
animazione: cloudanimation2;
durata dell'animazione: 15s;
animazione-iterazione-conte: infinito;

La classe Div Cloud2 viene applicata con le proprietà spiegate di seguito:

• • ".Cloud2"Viene utilizzato per accedere alla classe cloud2.
  • "immagine di sfondo"La proprietà è impostata come URL (/Images/Cloud.png), dove l'immagine è una cartella che contiene la nuvola di immagine.png.
  • "Size di sfondo"Contiene un valore assicurarsi la visibilità dell'immagine.
  • "Ripeat di sfondo"Proprietà con il valore impostato come non ripeat visualizza l'immagine come non ripeat.
  • "posizione"Come assoluta posiziona l'immagine relativa all'elemento del suo genitore.
  • "superiore"La proprietà imposta l'immagine a 100px dall'alto.
  • "larghezza"La proprietà viene utilizzata per impostare la larghezza dell'elemento Div.
  • "altezza"La proprietà viene utilizzata per impostare l'altezza dell'elemento Div.
  • "animazione"Viene assegnato il nome cloudanimation2.
  • "durata dell'animazione"Rappresenta la durata dell'animazione.
  • "animazione-iterazione-conteggio"Viene assegnato il valore infinito, che iterirà i tempi di animazione infiniti.

Specifica @KeyFrames per cloudanimation1

@KeyFrames CloudAnimation1
A
A sinistra: 0px;

da
A sinistra: 100%;

Il div Cloud1 è vincolato con l'animazione descritta di seguito:

• • "@KeyFrames CloudAnimation1"Il nome di animazione cloudanimation1 è seguito dalla parola chiave @KeyFrames utilizzata per specificare la transizione.
  • La parola chiave @KeyFrames specifica il modo in cui l'animazione viene eseguita dall'inizio alla fine sulle immagini di cloud.
  • IL "A" E "da"Parole chiave Specificare che Cloud1 passerà dal 100% a 0px dello schermo.

Specifica @KeyFrames per cloudanimation2

@KeyFrames CloudAnimation2
0%
A sinistra: 0%;

100%
A sinistra: 100%;

La classe Div Cloud2 è associata all'animazione spiegata di seguito:

• • "@KeyFrames CloudAnimation2"Rappresenta il nome di animazione cloudanimation2 seguito dalla parola chiave @keyframe utilizzata per specificare l'animazione.
  • IL "0%" E "100%"Rappresenta l'inizio e la fine dell'animazione.
  • Allo 0% dell'animazione, il cloud sarebbe a sinistra con il valore impostato allo 0% e si sposta gradualmente al 100% della larghezza.

Produzione

Questo è figo! Abbiamo discusso di come possiamo specificare l'animazione agli elementi utilizzando correttamente la parola chiave @KeyFrames.

Conclusione

CSS ci consente di applicare gli stili agli elementi HTML. L'animazione in CSS esegue transizioni da uno stile all'altro. È costituito da due componenti, gli stili di animazione e i frame chiave. Gli stili di animazione rappresentano proprietà diverse come il loro nome, la durata dell'animazione, il conteggio dell'animazione e altro ancora. Mentre il componente KeyFrame definisce l'inizio e la fine dell'animazione. Questa guida ha elaborato su come impostare i frame dei tasti di animazione con esempi.