Animación CSS Básica
Jorge Olaya
Jorge Olaya
Frontend DeveloperAnteriormente para hacer una animación, teníamos que hacerla bien sea con Javascript, Flash o hasta con una imagen Gif, pero ahora con la herramienta de animación CSS todo es más fácil, cabe dejar claro que esta herramienta no funciona en Internet Explorer...
La animación como herramienta CSS se compone de estas seis propiedades, sin ellas no es posible que funcione correctamente.
- animation-name
Esta herramienta nos sirve para especificar el nombre clave que utilizaremos para la animación.
- animation-duration
Específica en “s” segundos o “ms” Milisegundos la duración de la animación
- animation-timing-function
Especifica la velocidad de la animación
- animation-delay
Especifica el momento de la partida
- animation-iteration.count
Especifica cuántas veces se debe repetir la animación
- animation-direction
Específica los ciclos de la reproducción
Ejemplo
HTML
CSS
Este" class="redactor-autoparser-object">https://gist.github.com/338246... es el resultado, así obtenemos una animación sencilla, para mayor información visite las siguientes páginas
CSS animations | Mozilla Developer Network
w3schools
Written by Jorge Olaya
Jorge Olaya
Jorge specializes in creating visually appealing and intuitive user interfaces. His focus on design and user experience ensures that applications are both functional and engaging.
