Para aplicar una animación tenemos en css la propiedad animation , esta propiedad tenemos que ponersela al elemento del html que queremos animar, se la agregamos como hacemos con culaquiera otra propiedad css que le agregamos a un elementos.
Tenemos que agregar como minimo al elemento que queremos animar estas dos propiedades ,** animation-name** y animation-duration
La primera define el nombre de la animación que se le aplicara al elemento, la segunda el tiempo de duración que tendrá la animación.
Luego de haber aplicado estas propiedad al elemento , tenemos que pasar a crear la animacion, para esto usamos el @keyframes.
La sintaxis de los keyframes es la siguiente:
1- primero ponemos el arroba
2- luego pegado al arroba va la palabra keyframes
3- luego el nombre de la animación( tiene que se el mismo que especificamos mas arriba en las propiedades)
4- abrimos y cerramos llaves
5- entre las llaves tenemos que especificar como mínimo dos porcentajes, uno que marcara que propiedades tendrá la animación al inicio, y el segundo porcentaje es hacia que propiedades y valores se dirigirá la animación en su transcurso.
En resumen, son dos pasos:
A- tenemos que agregar en el css las propiedades de animacion al elemento css que queremos animar, especificandole como minimo un animation-name y un animation-duration.
B- y segundo debemos crear la animación con el @keyframes.
Acá un ejemplo de una animación que hace que un h5 se haga de visible a invisible
Curso de Animaciones para la Web
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
