CSS és una de les maneres més poderoses de fer que la pàgina web sigui interactiva. Transforma l’aspecte i la sensació del nostre element bàsic pàgina web. Una de les funcions importants i emocionants que ofereix CSS és que ens permet realitzar animacions. Ens permet moure els elements dins de la nostra pàgina. Comencem el nostre viatge d'animacions en CSS en l'ordre següent:
Animacions en CSS
Afegir animacions al nostre lloc web és una manera fantàstica de cridar l’atenció dels usuaris. No només afegeix valor a la nostra pàgina, sinó que també enriqueix l’experiència de l’usuari. L'animació en CSS es basa en dues parts. Ells són
- Fotogrames clau
- Animació
Les animacions CSS són compatibles amb tots els navegadors. No obstant això, alguns navegadors antics com Safari (fins a la versió 8.0) requereixen un prefix (-webkit-) per interpretar les propietats de l'animació. Per exemple:
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% -webkit-animation-name: cssanim / * old browsers * / -webkit-animation-duration: 5s / * old browsers * / animation -name: animació cssanim-durada: 5s} / * navegadors antics * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Podem utilitzar la pàgina html de mostra des de dalt i substituir el codi CSS a l'etiqueta d'estil per provar més exemples.
Fotogrames clau en CSS
Aquest és el bloc bàsic de les animacions en CSS. Solia definir moments i estils específics de l’animació a la nostra pàgina web. Dit d’una altra manera, quan especifiquem els @keyframes dins del nostre CSS, s’obté el control per modificar l’estat actual a un estat nou o animar els objectes durant una determinada durada.
Els @keyframes han de tenir certes propietats per controlar l'animació, com ara el nom de l'animació, les etapes i les propietats.
titella vs xef vs ansible
Nom - Es requereix un nom per a cada animació per descriure el seu comportament.
Etapes - L’escenari representa la realització d’una animació. Es pot indicar amb paraules clau 'a' i 'de' o com a percentatge, mentre que el 0% representa l'estat inicial i el 100% representa l'estat final d'una animació. L’avantatge d’utilitzar la representació percentual és que podem definir diverses etapes intermèdies, és a dir, quin hauria de ser el comportament de l’animació en un 50% o 75%, etc.
Propietats - Aquestes propietats ens donen control sobre els @keyframes per manipular-los durant l'animació.
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Ara ja que tenim clar la definició de fotogrames clau. Explorem les propietats de l'animació per descriure com animar els nostres elements i objectes. Les dues propietats, és a dir, heretar i inicial, es poden utilitzar amb tots els tipus d’animació. Aquestes propietats s'utilitzen generalment juntament amb l'etiqueta div per mostrar diferents comportaments.
inicial: Estableix aquesta propietat al seu valor per defecte.
heretar: Hereta aquesta propietat del seu element pare.
Propietats de l'animació
- nom-animació
Especifica el nom de l'animació, que s'utilitza a @keyframes per manipular.Els valors possibles són:
- nom: S’especifica el nom per lligar al fotograma clau per a l’animació.
- cap: Aquest és el valor per defecte i es pot utilitzar per anul·lar les animacions heretades o en cascada.
Sintaxi:
nom-animació: nom | cap | inicial | heretar
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animació-durada
Especifica el temps que triga una animació a completar una execució. Es defineix en segons o mil·lisegons (per exemple, 4 s o 400 ms). El valor per defecte d'aquesta propietat és 0s, de manera que si no s'especifica aquesta propietat, l'animació no tindrà lloc.
Sintaxi:
animació-durada: temps
.anim {height: 200px width: 200px background: blue position: relative border-radi: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- retard d’animació
La propietat d'animació-retard ens permet especificar el retard en l'animació. Defineix quan s'iniciarà l'execució d'una seqüència d'animació.
El valor d'aquesta propietat es pot declarar en segons (s) o en mil·lisegons (ms). Pot contenir valors positius i negatius. Un valor positiu indica que l'animació començarà després de passar el temps especificat i, fins llavors, es mantindrà per unanimitat. D'altra banda, un valor negatiu iniciarà immediatament l'animació des del punt com si ja s'hagués executat durant un període de temps especificat.
Sintaxi:
animació-retard: temps
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {esquerra: 250 px}}- recompte-iteració d'animació
Aquesta propietat indica el nombre de vegades que s'ha de reproduir una seqüència d'animació. El valor per defecte d'aquesta propietat és 1.Els valors possibles són:
- número - indica el nombre d'iteracions
- infinit - indica que l'animació s'ha de repetir per sempre
Sintaxi:
animació-iteració-recompte: número | infinit
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- animació-direcció
Defineix la direcció de l'animació. La direcció de l'element es pot configurar per jugar cap endavant, cap enrere o en cicles alternatius.El valor per defecte d'aquesta propietat és normal i es restableix a cada cicle.Els valors possibles són:
normal - Aquest és el comportament predeterminat i l'animació es reprodueix cap endavant. Després de cada cicle, l'animació arriba al seu estat inicial i es torna a reproduir cap endavant
al revés - L’animació es reprodueix en sentit invers. Després de cada cicle, l'animació arriba al seu estat final i es reprodueix cap enrere
alternatiu - La direcció de l’animació s’inverteix, és a dir, es reprodueix primer cap endavant i després cap enrere en cada cicle. Cada cicle estrany fa una animació cap endavant i cada cicle parell fa retrocés.
alternatiu-invers - La direcció de l'animació s'inverteix alternativament. Aquí l'animació es reprodueix primer cap enrere i després cap endavant en cada cicle. Cada cicle senar es mou cap enrere o cap enrere i cada cicle parell fa una animació cap endavant.
Sintaxi:
animació-direcció: normal | revers |alternatiu | alternatiu-invers
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinit} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- funció-temporització-animació
Aquesta propietat determina la corba de velocitat o l'estil de moviment de l'animació. Està assignat per fer el canvi de l'estil d'animació sense problemes d'una forma a una altra. Si no s'assigna cap valor, per defecte facilitarà.Els valors possibles per a la funció de temporització-animació són:
facilitat - Aquest és el valor per defecte de la propietat. Aquí l'animació comença lentament, es torna ràpidament al centre i, de nou, acaba lentament.
lineal - L'animació manté la mateixa velocitat durant tot el cicle, és a dir, de principi a fi.
facilitat - L'animació comença lentament.
tranquil·litat - L'animació acaba lentament.
al poder de Java
facilitat d’entrada-sortida - L'animació es mou lentament durant l'inici i el final.
cubic-bezier (n, n, n, n) - Aquesta característica avançada ens permet crear una funció de temps personalitzada definint els nostres propis valors. El valor possible oscil·la entre 0 i 1.
Sintaxi:
funció-temporització-animació: lineal | facilitat | facilitat | facilitat | facilitat d'entrada-sortida |cubic-bezier (n, n, n, n)
.anim {height: 200px width: 200px background: blau clar posició: border-radio relatiu: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- mode d'ompliment d'animació
Aquesta és una propietat especial, ja que determina l'estil de l'animació abans o després de reproduir-la.Com per defecte, l'estil de l'element no es veu afectat per l'animació abans del començament o després que finalitzi. Aquesta propietat és útil ja que ajuda a anul·lar aquest comportament predeterminat de l'animació.Els valors següents són possibles per a la propietat de mode d’ompliment d’animació:
cap - Aquest és el valor per defecte de la propietat, és a dir, els estils d'animació no s'apliquen a l'element abans ni després de l'animació.
endavant - L’element reté els estils a la seqüència final de l’animació, és a dir, un cop acabada l’animació.
cap enrere - L’element conserva els estils a la seqüència inicial de l’animació, és a dir, abans que es fixi l’animació sobretot durant el retard de l’animació.
tots dos - Això significa que l'animació seguirà en la direcció, és a dir, cap endavant i cap enrere
Sintaxi:
mode d'ompliment d'animació: cap | endavant | cap enrere | tots dos
.anim {width: 50px height: 50px background: blue light color: white font-weight: bold position: relative animation-name: cssanim animation-duration: 5s animation-iteration-count: infinit border-radi: 100%} # anim1 { funció-temporització-animació: facilitat} # anim2 {animació-temporització-funció: lineal} # anim3 {animació-temporització-funció: facilitat-en} # anim4 {animació-temporització-funció: facilitat-sortida} # anim5 {animació- funció de temps: facilitat d'entrada} @keyframes cssanim {de {left: 0px} a {left: 400px}}- animació-joc-estat
Aquesta propietat especifica una animació en estat de reproducció o en pausa. A més, quan es reprèn una animació des de la pausa, comença des d'on va deixar.Els valors possibles són:
- jugant - Representar l'animació en execució
- en pausa - Per representar l'animació en estat de pausa.
Sintaxi:
animació-reproducció-estat: aturat | jugant
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backward border-radi: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animació
Això es coneix com a propietat abreujada d’animació. S'utilitza per a un codi més net. Una vegada que ens acostumem a totes les propietats de l'animació, es recomana que utilitzem la abreviatura de l'animació per codificar més ràpidament i definir totes les propietats en una sola línia.
Sintaxi:
com utilitzar Java swing
animació: [nom-animació] | [animació-durada] | [funció-temporització-animació] |[animació-retard] | [recompte-iteració-animació] | [animació-direcció] |[mode d'ompliment d'animació] | [estat-reproducció-animació]
Tots els efectes d'animació que mostrem més amunt mitjançant diferents propietats d'animació es poden aconseguir utilitzant la taquigrafiaanimació propietat.
.anim {height: 200px width: 200px background: lightblue position: relative border-radi: 100% animation-name: cssanim animation-duration: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}D’aquesta manera es conclouen totes les propietats d’animació que es poden utilitzar a CSS. Hem de provar diferents variacions d’aquestes propietats per obtenir una imatge més clara. Quan ens sentim còmodes, la propietat de taquigrafia d’animació pot ser de gran ajuda per escriure un codi més net i ràpid. Aquesta és una de les habilitats importants a aprendre en CSS per a desenvolupadors web. Com que tendim a centrar-nos més en objectes en moviment en lloc d’objectes estàtics, les animacions poden ajudar-nos a aconseguir-ho i també desenvolupar grans pàgines web notables.
Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'Animacions en CSS' i us respondrem.