Il linguaggio HTML fornisce la struttura della pagina Web e CSS fornisce il design e la formattazione di tale applicazione. Questa combinazione ti consente anche di aggiungere animazioni, poiché gli elementi animati sembrano più attraenti rispetto agli elementi statici. Consente inoltre a un elemento di cambiare gradualmente il proprio stile.
Questo articolo guiderà come possiamo applicare l'animazione agli elementi. Quindi, cominciamo!
Cosa sono i fotogrammi chiave di animazione CSS?
Per completare l'animazione, dobbiamo associare l'animazione all'elemento HTML. A tale scopo, utilizzare la parola chiave ' @keyframe ” 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 fotogrammi chiave di animazione in CSS, esamineremo due esempi.
Esempio 1
Per impostare i fotogrammi chiave di animazione in CSS, eseguire i seguenti passaggi:
-
- Aggiungi un con il nome della classe ' div-principale ”.
- All'interno del div, aggiungi un altro div con il nome della 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, “ Tutto quanto ” è il testo alternativo che viene aggiunto se l'immagine non viene visualizzata, e il “ larghezza ” per fornire la larghezza dell'immagine.
HTML
< div classe = 'div-principale' >
< div classe = 'img-peng' >
< imm src = 'immagini/pinguino.png' Tutto quanto = 'pinguino' larghezza = '100' >
div >
div >
.main-div {
CSS
larghezza: 90 % ;
altezza: 90px;
colore di sfondo: rgb ( 67 , 66 , 87 ) ;
margine: 20px automatico;
imbottitura: 10px;
}
Nei CSS, il ' .main-div ” viene aggiunto per accedere alla classe div. Le proprietà ad esso applicate 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 da destra.
- “ imbottitura Il valore della proprietà viene assegnato come 10px, che applica spazio attorno al contenuto dell'elemento.
Stile img-peng class
.img-peng {
larghezza: 50px;
altezza: 100px;
posizione: relativa;
animazione: agitare;
durata dell'animazione: 2s;
funzione di temporizzazione dell'animazione: 2s;
conteggio-iterazione-animazione: infinito;
}
Il ' .img-peng ” viene utilizzato per accedere alla classe div, menzionata nel file HTML sopra. Questo elemento div ha uno stile 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à viene assegnato il valore “ parente ”, il che significa che sarà posizionato rispetto alla sua posizione normale.
- “ animazione ” il nome è dato come “ scuotere ”. Tuttavia, puoi assegnare un nome all'animazione in base ai requisiti.
- “ animazione-durata ” rappresenta la durata dell'animazione, che è di 2 secondi.
- “ funzione di temporizzazione dell'animazione ” viene assegnato un valore di 2s che significa che in 2 secondi l'animazione è completata.
- “ conteggio-iterazione-animazione ” è impostato come infinito, il che significa che questa animazione avverrà in un tempo infinito.
Definisci @keyframes Con to e from keywords
@ i fotogrammi chiave tremano {
da {
in alto: 50px;
}
a {
margine inferiore: 200px;
}
}
La descrizione dei fotogrammi chiave di animazione impostati sull'immagine è elencata di seguito:-
- “ @keyframes scuotere ' si riferisce al nome dell'animazione shake seguito dalla parola chiave @keyframes. All'interno di questa regola viene specificato il comportamento dell'animazione.
- All'interno delle sue parentesi graffe, il ' da ' e ' a Le parole chiave ” specificano intervalli diversi per definire il comportamento dell'animazione.
- Il ' superiore ” viene assegnato il valore di 50px, il che significa che l'animazione inizia da 50px dalla parte superiore dello schermo e continua fino a 200px nella parte inferiore.
Di conseguenza, vedrai il seguente output:
Ora lascia che l'animazione si comporti in modo diverso a intervalli diversi. Per fare ciò, utilizza le percentuali di animazione nei @keyframes.Specifica @keyframes con percentuali
@ i fotogrammi chiave tremano {
0 % {
sinistra: -50 pixel ;
}
25 % {
sinistra: 50px;
}
cinquanta % {
sinistra: -25px ;
}
75 % {
sinistra: 25px;
}
100 % {
sinistra: 10px;
}
}
Quindi, la descrizione del frammento di codice sopra è menzionata qui:-
- I valori percentuali 0%, 25%, 50%, 75% e 100% rappresentano l'animazione a diversi intervalli.
- Inoltre, allo 0%, lo spazio a sinistra dell'immagine sarà “ -50 pixel ”. Al 25%, lo spazio a sinistra sarà ' 50 pixel ”. Al 50%, lo spazio a sinistra sarà ' -25px ”. Al 75%, lo spazio a sinistra sarà ' 25px ', e al termine dell'animazione (100%), lo spazio a sinistra sarà ' 10px ”.
Il codice sopra mostra la seguente animazione:
Facciamo un altro esempio per vedere come possiamo impostare le animazioni sulle immagini.Esempio 2
In HTML, aggiungi un
con il nome della classe ' pagina principale ”. All'interno di questo elemento, posiziona altri due tag div con le classi ' nuvola1 ' e ' nuvola2 ”, rispettivamente.HTML
< div classe = 'pagina principale' >
< div classe = 'nuvola1' > div >
< div classe = 'nuvola2' > div >
div >
corpo {
CSS
margine: 0 ;
imbottitura: 0 ;
}
In CSS, assegneremo le seguenti proprietà CSS all'elemento body:-
- “ margine La proprietà ” come 0 non specifica nessuno spazio attorno all'elemento.
- “ imbottitura La proprietà ” con il valore 0 non specifica nessuno spazio attorno al contenuto dell'elemento.
Stile div pagina principale
.pagina principale {
immagine di sfondo: url ( / immagini / notte-lupo.png ) ;
background-repeat: nessuna ripetizione;
dimensione dello sfondo: copertina;
altezza: 100 vh;
posizione: relativa;
trabocco: nascosto;
}
Qui:-
- “ .pagina principale ” viene utilizzato per accedere alla classe div.
- “ immagine di sfondo ” alla proprietà viene assegnato il valore “ url(/images/lupo-notte.png) ” dove images è la cartella che contiene l'immagine wolf-night.png.
- “ sfondo-ripetizione ” alla proprietà viene assegnato il valore “ senza ripetizione , il che significa che l'immagine verrà visualizzata una volta.
- “ dimensione dello sfondo ” è impostato come “ coperchio ” per riempire l'intero elemento div.
- “ altezza ” è 100vh che è il 100% dell'altezza del viewport.
- “ posizione ” as relative imposta la posizione dell'immagine rispetto alla sua posizione corrente.
- “ traboccare Il valore della proprietà è impostato come nascosto per nascondere la parte dell'immagine che è troppo grande per entrare nel contenitore.
Classe stile cloud1
.nuvola1 {
immagine di sfondo: url ( / immagini / nuvola.png ) ;
background-size: contenere;
background-repeat: nessuna ripetizione;
posizione: assoluta;
in alto: 100px;
larghezza: 500px;
altezza: 300px;
animazione: cloudanimation1;
durata dell'animazione: anni '70;
conteggio-iterazione-animazione: infinito;
}
La classe div cloud1 viene applicata con le seguenti proprietà spiegate:-
- “ .nuvola1 ” viene utilizzato per accedere alla classe div cloud1.
- “ immagine di sfondo ” è impostata come url(/images/cloud.png), dove images è la cartella contenente l'immagine cloud.png.
- “ dimensione dello sfondo ” con il valore “ contenere ” garantisce la visibilità dell'immagine.
- “ sfondo-ripetizione ” proprietà con il valore impostato come “ senza ripetizione ” visualizza l'immagine come non ripetuta.
- “ posizione ” come assoluto posiziona l'immagine rispetto all'elemento del suo genitore.
- “ superiore ” imposta l'immagine a 100px dall'alto.
- “ larghezza La proprietà ” viene utilizzata per impostare la larghezza dell'elemento div su 500px.
- “ altezza La proprietà ” viene utilizzata per impostare l'altezza dell'elemento div su 300px.
- “ animazione ” viene assegnato il nome cloudanimation1.
- “ animazione-durata ” rappresenta la durata dell'animazione, che è di 70 secondi.
- “ conteggio-iterazione-animazione ” viene assegnato il valore infinito, che itererà l'animazione infinite volte.
Finora abbiamo applicato le proprietà CSS alla pagina principale della classe div e a cloud1. Ora, nella sezione successiva, definiremo lo stile della prossima classe div denominata cloud2.
Classe stile cloud2
.nuvola2 {
immagine di sfondo: url ( / immagini / nuvola.png ) ;
background-size: contenere;
background-repeat: nessuna ripetizione;
posizione: assoluta;
in alto: 50px;
larghezza: 200px;
altezza: 300px;
animazione: cloudanimation2;
durata dell'animazione: 15s;
conteggio-iterazione-animazione: infinito;
}
La classe div cloud2 viene applicata con le proprietà spiegate di seguito:-
- “ .nuvola2 ” serve per accedere alla classe cloud2.
- “ immagine di sfondo ” è impostata come url(/images/cloud.png), dove l'immagine è una cartella che contiene l'immagine cloud.png.
- “ dimensione dello sfondo ” contiene un valore che garantisce la visibilità dell'immagine.
- “ sfondo-ripetizione ” con il valore impostato come no-repeat visualizza l'immagine come non-repeat.
- “ posizione ” come assoluto posiziona l'immagine rispetto all'elemento del suo genitore.
- “ superiore ” 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.
- “ animazione-durata ” rappresenta la durata dell'animazione.
- “ conteggio-iterazione-animazione ” viene assegnato il valore infinito, che itererà l'animazione infinite volte.
Specifica @keyframes per cloudanimation1
@ fotogrammi chiave cloudanimation1 {
a {
sinistra: 0px;
}
da {
sinistra: 100 % ;
}
}
Il div cloud1 è associato all'animazione descritta di seguito:-
- “ @keyframes cloudanimation1 ” il nome dell'animazione cloudanimation1 è seguito dalla parola chiave @keyframes utilizzata per specificare la transizione.
- La parola chiave @keyframes specifica come viene eseguita l'animazione dall'inizio alla fine sulle immagini cloud.
- Il ' a ' e ' da ' le parole chiave specificano che il cloud1 si sposterà dal 100% allo 0px dello schermo.
Specifica @keyframes per cloudanimation2
@ fotogrammi chiave cloudanimation2 {
0 % {
sinistra: 0 % ;
}
100 % {
sinistra: 100 % ;
}
}
La classe div cloud2 è associata all'animazione spiegata di seguito:-
- “ @keyframes cloudanimation2 ” rappresenta il nome dell'animazione cloudanimation2 seguito dalla parola chiave @keyframes utilizzata per specificare l'animazione.
- Il ' 0% ' e ' 100% ” rappresentano l'inizio e la fine dell'animazione.
- Allo 0% dell'animazione, la nuvola sarebbe a sinistra con il valore impostato come 0% e si sposterà gradualmente al 100% della larghezza.
Produzione
Questo è figo! Abbiamo discusso di come possiamo specificare correttamente l'animazione degli elementi utilizzando la parola chiave @keyframes.Conclusione
I CSS ci permettono di applicare stili agli elementi HTML. L'animazione in CSS esegue transizioni da uno stile all'altro. Consiste di due componenti, gli stili di animazione e i fotogrammi chiave. Gli stili di animazione rappresentano proprietà diverse come il nome, la durata dell'animazione, il conteggio delle iterazioni dell'animazione e altro ancora. Mentre il componente keyframe definisce l'inizio e la fine dell'animazione. Questa guida ha spiegato come impostare i fotogrammi chiave di animazione con esempi.
- Aggiungi un