Crear animaciones con CSS

Crear animaciones con CSS

Crear animaciones con CSS
5 (100%) 1 voto

Hoy vamos a ver como crear animaciones con CSS de forma sencilla y rápida con total compatibilidad para los navegadores de hoy, en otras palabras, hoy  veremos KeyFrames en css. ¿Alguna vez quisiste darle un poco de animación a tu web sin tener que recurrir a pesadas imágenes gif? Pues hoy veremos los keyframes en css y como animar un poco tu web para hacerla mas atractiva para la vista de nuestros lectores, desde simples movimientos hasta algo un poco mas complejo, ¿Estas listo?

Entendiendo – La Teoría

Crear animaciones con css no es mas que otra cosa que hacer uso de reglas @keyframes, esto se hace cambiando un conjunto de estilos css de un objeto por otro, esto simula animación de este objeto ante la vista de tus visitantes. Estas reglas son soportadas por la mayoría de navegadores modernos así no tendrás problemas por su uso, para crear una animación básicamente hay que seguir 2 pasos:

  • Definir la animación
  • Utilizar la animación en el objeto deseado

Para definir la animación tenemos que hacer uso de keyframes siguiendo la siguiente estructura,

donde mianimacion es el nombre que nosotros le damos a la animación para hacer referencia a ella en las propiedades del objeto a animar, 0% define el estilo css al iniciar la animación y 100% define el estilo css al terminar la animación pudiendo haber porcentajes intermedios como 7%, 50% u cualquier otro valor.

Para utilizar la animación en el estilo del objeto a animar agregamos la linea animation:propiedades; asi,

donde objetoaanimar es el objeto que queremos animar en nuestra web y animation es la linea que enlaza a nuestra animación con algunos parámetros como duración y numero de iteraciones.

Cabe resaltar que la propiedad animation tiene las siguiente propiedades:

  • animation-delay -> Cuanto tarda la animación en comenzar
  • animation-direction -> Especifica cuando debería la animación reproducirse al revés o en ciclos alternativos.
  • animation-duration -> Establece en segundos o mili segundos cuanto tiempo tarda un ciclo.
  • animation-fill-mode -> Especifica que estilo se aplicara cuando la animación este finalizada o en retraso.
  • animation-iteration-count -> Especifica el numero de veces que la animación es reproducida.
  • animation-name -> Especifica el nombre de la animación.
  • animation-play-state -> Especifica cuando la animación es en pausa o corriendo.
  • animation-timing-function -> Especifica la curva de velocidad de la animación.

y pueden utilizarse juntas en una sola linea o separadas de la siguiente forma,

En cuestiones de compatibilidad de navegadores deberás optimizar tu css para ser compatible con los navegadores mas utilizados de hoy en día.

Por ejemplo, ademas de utilizar la regla @keyframes mianimacion {} tambien deberás escribir lo mismo para chrome, firefox y opera agregando sus respectivos prefijos, -webkit- -moz- -o- así,

Veamos un ejemplo para mas claro.

Creando una animación con css – Ejemplo

Vamos a crear un balón de ffútbolque recorra la pantalla de izquierda a derecha con animaciones con css,

lo primero que necesitamos es una imagen de balóncomo esta,

crear animaciones con css ball

 

Ahora necesitamos crear dentro de nuestro código css una regla keyframes de animación, nuestro balón ira de izquierda a derecha y derecha a izquierda infinitamente así que escribimos eso haciendo uso de margin-left asi: (recuerda que debemos agregar la compatibilidad para los diferentes navegadores)

Y ahora simplemente agregamos nuestra animación a nuestro objeto, en mi caso la imagen de balón tiene un div en el que registre un id llamado balón,

y el resultado es el siguiente…

crear animaciones con css ball

Si quieres seguir aprendiendo de @keyframes y animaciones puedes echarle un vistazo a los siguiente enlaces: @keyframes | animations

Crear animaciones con CSS

Crear animaciones con CSS
5 (100%) 1 voto

Deja tu comentario

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Loading Facebook Comments ...