El llenguatge HTML proporciona l'estructura de la pàgina web, i CSS proporciona el disseny i el format d'aquesta aplicació. Aquesta combinació també us permet afegir animació, ja que els elements animats semblen més atractius en comparació amb els elements estàtics. També permet que un element canviï el seu estil gradualment.
Aquest article guiarà com podem aplicar l'animació als elements. Així doncs, comencem!
Què són els fotogrames clau d'animació CSS?
Per fer l'animació, hem d'enllaçar l'animació a l'element HTML. Per a això, utilitzeu la paraula clau ' @fotogrames clau ” seguit del nom de l'animació. Aquest component especifica l'inici i el final de l'animació.
Com configurar fotogrames clau d'animació CSS?
Per configurar fotogrames clau d'animació en CSS, passarem per dos exemples.
Exemple 1
Per configurar fotogrames clau d'animació en CSS, seguiu els passos següents:
-
- Afegiu un amb el nom de la classe ' principal-div ”.
- Dins del div, afegiu un altre div amb el nom de la classe ' img-peng ”.
- Dins d'aquest img-peng div, afegiu
per col·locar la imatge. Aquesta etiqueta té tres atributs, el ' src 'atribut per proporcionar el camí de la imatge,' tot ' és el text alternatiu que s'afegeix si la imatge no es mostra, i el ' amplada ” atribut per proporcionar l'amplada de la imatge.
HTML
< div classe = 'divisió principal' >
< div classe = 'img-peng' >
< img src = 'imatges/penguin.png' tot = 'pingüí' amplada = '100' >
div >
div >
.principal-div {
CSS
amplada: 90 % ;
alçada: 90px;
color de fons: rgb ( 67 , 66 , 87 ) ;
marge: 20px automàtic;
farciment: 10px;
}
En CSS, el ' .principal-div ” s'afegeix per accedir a la classe div. Les propietats aplicades s'expliquen a continuació:-
- “ amplada ” El valor de la propietat defineix l'amplada del div.
- “ alçada La propietat s'utilitza per establir l'alçada del div.
- “ color de fons ” La propietat aplica color al fons de l'element.
- “ marge ' s'estableix com ' Cotxe de 20 píxels ”, que indica l'espai de dalt i baix, i automàtic significa espai igual d'esquerra i dreta.
- “ farciment El valor de la propietat s'assigna com a 10px, que aplica espai al voltant del contingut de l'element.
Classe d'estil img-peng
.img-peng {
amplada: 50 píxels;
alçada: 100px;
posició: relatiu;
animació: sacsejar;
animació-durada: 2s;
funció de temporització d'animació: 2s;
animació-recompte-iteració: infinit;
}
El ' .img-peng ” s'utilitza per accedir a la classe div, esmentada al fitxer HTML anterior. Aquest element div té un estil amb les propietats que es comenten a continuació:-
- “ amplada El valor de la propietat s'utilitza per establir l'amplada de l'element.
- “ alçada ” s'utilitza el valor de la propietat per establir l'alçada de l'element.
- “ posició ' a la propietat se li assigna el valor ' relatiu ”, el que significa que es col·locarà en relació a la seva posició normal.
- “ animació ” el nom es dóna com “ sacsejar ”. Tanmateix, podeu anomenar l'animació segons el requisit.
- “ animació-durada ” representa la durada de l'animació, que és de 2 segons.
- “ funció de temporització d'animació ” s'assigna un valor de 2 s, el que significa que en 2 segons, l'animació s'ha completat.
- “ animació-recompte-iteracions ” s'estableix com a infinit, el que significa que aquesta animació es produirà en un temps infinit.
Definiu @keyframes Amb paraules clau de i des de
@ els fotogrames clau tremolen {
des de {
superior: 50 píxels;
}
a {
marge inferior: 200px;
}
}
La descripció dels fotogrames clau d'animació establerts a la imatge es mostra a continuació:-
- “ @keyframes tremola ” es refereix al moviment del nom de l'animació seguit de la paraula clau @keyframes. Dins d'aquesta regla, s'especifica el comportament de l'animació.
- Dins dels seus parèntesis, el ' des de ' i ' a ” les paraules clau especifiquen diferents intervals per definir el comportament de l'animació.
- El ' superior ” s'assigna el valor de 50px, el que significa que l'animació comença des de 50px des de la part superior de la pantalla i continua fins als 200px a la part inferior.
Com a resultat, veureu la sortida següent:
Ara, deixeu que l'animació es comporti de manera diferent a diferents intervals. Per fer-ho, utilitzeu els percentatges d'animació dels @keyframes.Especifiqueu @keyframes amb percentatges
@ els fotogrames clau tremolen {
0 % {
esquerra: -50 píxels ;
}
25 % {
esquerra: 50px;
}
50 % {
esquerra: -25 píxels ;
}
75 % {
esquerra: 25px;
}
100 % {
esquerra: 10px;
}
}
Per tant, la descripció del fragment de codi anterior s'esmenta aquí:-
- Els valors percentuals 0%, 25%, 50%, 75% i 100% representen l'animació a diferents intervals.
- A més, al 0%, l'espai a l'esquerra de la imatge serà ' -50 píxels ”. Al 25%, l'espai a l'esquerra serà ' 50 píxels ”. Al 50%, l'espai a l'esquerra serà ' -25 píxels ”. Al 75%, l'espai esquerre serà ' 25 píxels ', i quan l'animació finalitzi (100%), l'espai esquerre serà ' 10 píxels ”.
El codi anterior mostra l'animació següent:
Prenguem un altre exemple per veure com podem establir animacions a les imatges.Exemple 2
En HTML, afegiu un
amb el nom de classe ' Pàgina principal ”. Dins d'aquest element, col·loqueu dues etiquetes div més amb classes ' núvol 1 ' i ' núvol 2 ”, respectivament.HTML
< div classe = 'Pàgina principal' >
< div classe = 'núvol1' > div >
< div classe = 'núvol2' > div >
div >
cos {
CSS
marge: 0 ;
farciment: 0 ;
}
En CSS, assignarem les següents propietats CSS a l'element body:-
- “ marge La propietat 0 no especifica cap espai al voltant de l'element.
- “ farciment ” amb el valor 0 no especifica cap espai al voltant del contingut de l'element.
Estil de la pàgina principal div
.Pàgina principal {
imatge de fons: url ( / imatges / nit-llop.png ) ;
background-repeat: sense repetició;
mida de fons: coberta;
alçada: 100vh;
posició: relatiu;
desbordament: amagat;
}
Aquí:-
- “ .Pàgina principal ” s'utilitza per accedir a la classe div.
- “ imatge de fons ' a la propietat se li assigna el valor ' url(/images/wolf-night.png) ” on images és la carpeta que conté la imatge wolf-night.png.
- “ fons-repetició ' a la propietat se li assigna el valor ' no-repeat , el que significa que la imatge es mostrarà una vegada.
- “ mida de fons ' s'estableix com a ' coberta ” per omplir tot l'element div.
- “ alçada ” és 100vh, que és el 100% de l'alçada de la finestra.
- “ posició ” com a relatiu estableix la posició de la imatge en relació a la seva ubicació actual.
- “ desbordament ” el valor de la propietat s'estableix com a amagat per ocultar la part de la imatge que és massa gran per cabre al contenidor.
Classe d'estil cloud1
.núvol1 {
imatge de fons: url ( / imatges / núvol.png ) ;
mida de fons: contenir;
background-repeat: sense repetició;
posició: absoluta;
superior: 100 píxels;
amplada: 500 píxels;
alçada: 300px;
animació: cloudanimation1;
animació-durada: 70s;
animació-recompte-iteració: infinit;
}
La classe div cloud1 s'aplica amb les propietats explicades següents:-
- “ .núvol1 ” s'utilitza per accedir a la classe div cloud1.
- “ imatge de fons ” s'estableix com a url(/images/cloud.png), on les imatges són la carpeta que conté la imatge cloud.png.
- “ mida de fons 'amb el valor' contenir ” assegura la visibilitat de la imatge.
- “ fons-repetició ' propietat amb el valor definit com ' no-repeat ” mostra la imatge com a no repetida.
- “ posició ” com a posicions absolutes de la imatge en relació amb l'element del seu pare.
- “ superior ” estableix la imatge a 100 px des de la part superior.
- “ amplada La propietat s'utilitza per establir l'amplada de l'element div a 500 px.
- “ alçada La propietat s'utilitza per establir l'alçada de l'element div a 300 px.
- “ animació ” s'assigna el nom cloudanimation1.
- “ animació-durada ” representa la durada de l'animació, que és de 70 segons.
- “ animació-recompte-iteracions ” s'assigna el valor infinit, que repetirà l'animació infinites vegades.
Fins ara, hem aplicat les propietats CSS a la pàgina principal de la classe div i al núvol1. Ara, a la següent secció, estilitzarem la següent classe div anomenada cloud2.
Classe d'estil cloud2
.núvol2 {
imatge de fons: url ( / imatges / núvol.png ) ;
mida de fons: contenir;
background-repeat: sense repetició;
posició: absoluta;
superior: 50 píxels;
amplada: 200 píxels;
alçada: 300px;
animació: cloudanimation2;
animació-durada: 15s;
animació-recompte-iteració: infinit;
}
La classe div cloud2 s'aplica amb les propietats que s'expliquen a continuació:-
- “ .núvol2 ” s'utilitza per accedir a la classe cloud2.
- “ imatge de fons ” s'estableix com a url(/images/cloud.png), on la imatge és una carpeta que conté la imatge cloud.png.
- “ mida de fons ” conté un valor que garanteix la visibilitat de la imatge.
- “ fons-repetició ” amb el valor establert com a no repetit mostra la imatge com a no repetida.
- “ posició ” com a posicions absolutes de la imatge en relació amb l'element del seu pare.
- “ superior ” estableix la imatge a 100 px des de la part superior.
- “ amplada ” s'utilitza per establir l'amplada de l'element div.
- “ alçada ” s'utilitza per establir l'alçada de l'element div.
- “ animació ” s'assigna el nom cloudanimation2.
- “ animació-durada ” representa la durada de l'animació.
- “ animació-recompte-iteracions ” s'assigna el valor infinit, que repetirà l'animació infinites vegades.
Especifiqueu @keyframes per al cloudanimation1
@ fotogrames clau cloudanimation1 {
a {
esquerra: 0px;
}
des de {
esquerra: 100 % ;
}
}
El div cloud1 està lligat amb l'animació que es descriu a continuació:-
- “ @keyframes cloudanimation1 ” el nom de l'animació cloudanimation1 va seguit de la paraula clau @keyframes que s'utilitza per especificar la transició.
- La paraula clau @keyframes especifica com es fa l'animació de principi a fi a les imatges del núvol.
- El ' a ' i ' des de ” les paraules clau especifiquen que el núvol1 passarà del 100% als 0px de la pantalla.
Especifiqueu @keyframes per al cloudanimation2
@ fotogrames clau cloudanimation2 {
0 % {
esquerra: 0 % ;
}
100 % {
esquerra: 100 % ;
}
}
La classe div cloud2 està associada a l'animació que s'explica a continuació:-
- “ @keyframes cloudanimation2 ” representa el nom de l'animació cloudanimation2 seguit de la paraula clau @keyframes que s'utilitza per especificar l'animació.
- El ' 0% ' i ' 100% ” representen l'inici i el final de l'animació.
- Al 0% de l'animació, el núvol estaria a l'esquerra amb el valor establert com a 0% i es mourà gradualment al 100% de l'amplada.
Sortida
Això és genial! Hem comentat com podem especificar l'animació dels elements utilitzant la paraula clau @keyframes amb èxit.Conclusió
CSS ens permet aplicar estils als elements HTML. L'animació en CSS realitza transicions d'un estil a un altre. Consta de dos components, els estils d'animació i els fotogrames clau. Els estils d'animació representen diferents propietats, com ara el seu nom, la durada de l'animació, el nombre d'iteracions d'animació i molt més. Mentre que el component de fotograma clau defineix l'inici i el final de l'animació. Aquesta guia explica com configurar fotogrames clau d'animació amb exemples.
- Afegiu un