Crear animaciones con CSS | Jonathan Melgoza

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,

@keyframes mianimacion{
   0%{opacity:0;}
   100%{opacity:1;}
}

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,

objetoaanimar{
    animation:mianimacion 5s infinite;
}

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,

animation-name: mianimacion;
animation-duration: 5s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;

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í,

@keyframes mianimacion {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes mianimacion  {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes mianimacion  {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes mianimacion  {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

Veamos un ejemplo para mas claro.

Creando una animación con css – Ejemplo

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

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

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)

@keyframes moverbola{
 0%{margin-left:0px;}
 10%{margin-left:100px;}
 20%{margin-left:200px;}
 30%{margin-left:300px;}
 40%{margin-left:400px;}
 50%{margin-left:500px;}
 60%{margin-left:400px;}
 70%{margin-left:300px;}
 80%{margin-left:200px;}
 90%{margin-left:100px;}
 100%{margin-left:0px;}
}
@-webkit-keyframes moverbola{
 0%{margin-left:0px;}
 10%{margin-left:100px;}
 20%{margin-left:200px;}
 30%{margin-left:300px;}
 40%{margin-left:400px;}
 50%{margin-left:500px;}
 60%{margin-left:400px;}
 70%{margin-left:300px;}
 80%{margin-left:200px;}
 90%{margin-left:100px;}
 100%{margin-left:0px;}
}
@-moz-keyframes moverbola{
 0%{margin-left:0px;}
 10%{margin-left:100px;}
 20%{margin-left:200px;}
 30%{margin-left:300px;}
 40%{margin-left:400px;}
 50%{margin-left:500px;}
 60%{margin-left:400px;}
 70%{margin-left:300px;}
 80%{margin-left:200px;}
 90%{margin-left:100px;}
 100%{margin-left:0px;}
}
@-o-keyframes moverbola{
 0%{margin-left:0px;}
 10%{margin-left:100px;}
 20%{margin-left:200px;}
 30%{margin-left:300px;}
 40%{margin-left:400px;}
 50%{margin-left:500px;}
 60%{margin-left:400px;}
 70%{margin-left:300px;}
 80%{margin-left:200px;}
 90%{margin-left:100px;}
 100%{margin-left:0px;}
}

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,

#balon{
 animation:moverbola 6s infinite;
 -webkit-animation:moverbola 6s infinite;
 -moz-animation:moverbola 6s infinite;
 -o-animation:moverbola 6s infinite;
 animation-timing-function: linear;
 -webkit-animation-timing-function: linear;
 -moz-animation-timing-function: linear;
 -o-animation-timing-function: linear;
}

y el resultado es el siguiente…

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

Clic para valorar esta información

[Total: 0 Promedio: 0]