Home-theater-designers
CSS ofereix als desenvolupadors la possibilitat de donar vida a les seves pàgines web mitjançant l'animació de fotogrames clau.
L'animació CSS s'aconsegueix alterant l'estat inicial d'un element HTML a través de les seves diverses propietats. Algunes propietats generals de CSS que es poden animar inclouen:
com fer que els jocs funcionin més ràpidament a l'ordinador portàtil
- Amplada
- Alçada
- Posició
- color
- Opacitat
Aquestes propietats generals de CSS són manipulades per elements CSS específics per crear el resultat desitjat. Si alguna vegada heu trobat un element animat en una pàgina web, és probable que l'element s'hagi animat mitjançant l'animació de fotogrames clau.
Què és un element de fotogrames clau?
El element de fotogrames clau es pot utilitzar en un o més elements HTML als quals té accés. Identifica un punt específic en l’estat d’un element i dicta l’aspecte que aquest element ha de tenir en aquest moment.
Pot semblar molt de digerir, però en realitat és bastant senzill. El element de fotogrames clau té una estructura força senzilla que es pot entendre i ajustar fàcilment per adaptar-se a qualsevol requisit d’animació.
Exemple d’estructura de fotogrames clau
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Suposem que voleu animar un botó rectangular verd convertint-lo en un botó rodó blau.
Dins dels paràmetres del fitxer des de a la secció superior, haureu de col·locar tot l'estil necessari perquè l'element sembli un botó rectangular de color verd i, a continuació, a la secció a , situareu tots els requisits d’estil per transformar aquest botó en un botó rodó blau.
Si estàs pensant, això no sona massa a l’animació. Bé, això es deu al fet que encara no s’ha introduït un component clau de tot aquest procés: aquest component és la propietat de l’animació.
La propietat d'animació
El propietat d'animació té un conjunt de subpropietats diferents; aquests s'utilitzen en combinació amb l'estructura de fotogrames clau anteriors per animar l'element HTML desitjat.
Tot i això, només heu de conèixer cinc d’aquestes subpropietats i els valors que s’hi associen per aconseguir animació als vostres projectes. Aquestes propietats es coneixen com:
- Nom-animació
- Animació-durada
- Funció de temporització-animació
- Retard d’animació
- Animació-iteració-recompte
Ús d’animació en una pàgina web
Utilitzant l’escenari anterior, l’objectiu és crear un botó animat.
Exemple d'animació de botó
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
La secció d'animació del codi anterior conté les cinc subpropietats que es van esmentar anteriorment. Cada propietat té una funció molt diferent i junts treballen per animar qualsevol element HTML al qual estan destinats a orientar-se.
Relacionat: Com orientar una part d'una pàgina web mitjançant selectors CSS
La propietat Animation-name
Aquesta propietat és la propietat més important de la llista. Sense el propietat d’animació-nom , no tindríeu cap identificador per passar al fitxer element de fotogrames clau , fent inútil tot el codi dins dels seus paràmetres.
Si heu oblidat d’incloure una o dues de les altres subpropietats, és possible que tingueu una animació bastant decent. Tanmateix, si heu oblidat el propietat d’animació-nom no tindríeu animació.
La propietat Animation-duration
Aquesta propietat s'utilitza per definir el temps que ha de passar un element animat en passar d'un estat a un altre.
A l'exemple anterior, el fitxer propietat d’animació-durada s'estableix en 5 segons (5 s), de manera que el botó rectangular verd tindrà un total de 5 segons abans de convertir-se completament en un botó rodó blau.
La propietat Animation-delay
Aquesta propietat és important per una raó; algunes pàgines web poden trigar uns segons a carregar-se completament (a causa de diversos factors diferents). Doncs el propietat de retard d’animació impedeix que l'animació s'iniciï immediatament en cas que la pàgina web trigui a carregar-se.
A l'exemple anterior, el fitxer propietat de retard d’animació es defineix en 4 s, cosa que significa que l'animació no començarà fins als 4 segons després de la visita de la pàgina web (donant temps suficient a la pàgina web per carregar-la abans que comenci l'animació).
La propietat Animation-iteration-count
Aquesta propietat indica quantes vegades l’element animat ha de passar d’un estat a l’altre. El propietat d'animació-iteració-recompte pren valors que són paraules i números. El valor numèric pot ser des de l'1 cap amunt, mentre que el valor de la paraula sol ser infinit .
A l'exemple anterior, el fitxer valor d'animació-iteració-recompte està definit a infinit , el que significa que mentre la pàgina web estigui amunt, la propietat del botó s'animarà d'un estat a un altre de forma contínua.
La propietat Animation-timing-function
Aquesta propietat dicta el moviment de l'element animat a mesura que transita d'un estat a un altre. El propietat de funció d’animació-temporització se li assigna normalment un dels tres valors de facilitat.
- Facilitat
- Facilitat
- Facilitat d’entrada-sortida
El valor de facilitat d’entrada s’utilitza a sobre; això transita lentament l’animació d’un estat a l’altre. Si l'objectiu és crear una transició lenta quan el botó es transforma d'un rectangle verd a un cercle blau, faríeu servir el botó valor facilitat . Si només volguéssiu una transició lenta en la direcció oposada, faríeu servir el fitxer valor de facilitat .
Reducció del nostre codi
En la majoria dels casos, reduir la durada d’un programa es veu com un enfocament pràctic. Això es deu principalment a que menys línies de codi redueixen la probabilitat que els errors passin desapercebuts als vostres programes.
El codi anterior es pot reduir en quatre línies. Això es pot aconseguir simplement utilitzant la propietat d'animació sense identificar explícitament cadascuna de les seves subpropietats.
Reducció del codi de l'exemple d'animació de botons
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}