Animaciones en CSS – Tecnitium

Hemos visto que CSS es el complemento perfecto a HTML para la definición de la estética de una web, sus capacidades son muchas y muy variadas, una de ellas, es la de definir e integrar animaciones en nuestras páginas, es decir, contenidos dinámicos.

Los contenidos dinámicos puedes generarse de varias maneras, nos centraremos ahora en las animaciones (animation).

Las animaciones siguen un funcionamiento basado en dos puntos:

La definición de las animaciones: se definen los keyframes, esto es, la secuencia que seguirá la animación. Podemos definir un estado origen y otro final o podemos definir tantos frames intermedios como deseemos. Veamos un ejemplo:

@keyframes cambiarColor{
  0%{
   background-color: red;
  }
  50%{
   background-color: green;
  }
  100%{
   background-color: blue;
  }
}

De este modo hemos definido un keyframe de tres pasos en los que irá cambiando el color de fondo del elemento.

Llamada a la animación: Ahora hacemos una llamada al keyframe que queramos a través de su nombre, desde el elemento al que queramos aplicar la animación y definimos sus parámetros base.

.elemento{
  animation-name: cambiarColor;
  animation-duration: 3s;
  ...
}

Con ese código, estamos definiendo que el elemento tendrá la animación «cambiarColor» asignada y que su duración será de 3s.

PARAMETROS

Del mismo modo que hemos definido la duración, existen varios parámetros útiles a la que hora de trabajar con animaciones:

animation-name: se define en ella el nombre del keyframe.
animation-duration: define la duración de la animación en segundos.
animation-iteration-count: número de repeticiones de la animación, admite «infinite». Por defecto 1.
animation-direction: Define la dirección de la animación (alternate, normal, reverse…).
animation-fill-mode: define el comportamiento antes y después de la animación (forwards…).
animation-timing-function: Define los ritmos de la animación (linear…).
animation-play-state: Detiene o activa la ejecución de la animación (util para hovers).

Existen muchas más que se pueden consultar en detalle en la web de dev mozilla.