CSS3 – La propiedad “animation”

CSS3 es una especificación enorme que contiene multitud de nuevas propiedades y características. Sin embargo, una de las más celebradas son aquellas que nos permiten hacer animaciones y efectos usando únicamente CSS3. Aquí tenemos la lista de la propiedades que se pueden animar.

Para poner un ejemplo nos vamos a centrar en la propiedad “animation” y el código de la animación que va a ir detrás de la regla @keyframe.

La propiedad animation es una manera corta de fijar todas las subpropiedades que puede tener una animación. Éstas subpropiedades son:

  • animation-name: Especifica la lista de animaciones que se van a aplicar al elemento. Las animaciones son reglas @keyframes que debemos definir
  • animation-duration: Para especificar la duración en segundo de un ciclo de la animación.
  • animation-timing-function: Para especificar de qué forma van a evolucionar los valores que se van a animar.De manera lineal, más rápido al principio o al final etc..
  • animation-delay: Retardo para el comienso de la animación especificado en segundos.
  • animation-iteration-count: El número de veces que queremos que se repita la animación. Puede ser un número y muchas veces infinite si queremos que la animación se repita siempre.
  • animation-direction: Para especificar si la animación se debe reproducir de manera inversa, normal o en ciclos alternos (va y viene desde el principio hasta el final)
  • animation-fill-mode: Para definir como se deben aplicar los estilos al elementos seleccionado antes y después de la ejecución.
  • animation-play-state: Para definir si la animación está en pausa o funcionando. Por defecto, como es normal pensar, estará funcionando.

No siempre tenemos que usar todas las subpropiedades, así por ejemplo podemos especificar lo siguiente:

En cuanto a la regla @keyframe nos va a servir para controlar los pasos medios de una animación. Puede tener dos formas.

  • La primera donde tendremos un from y un to estableciendo los valores css iniciales y finales para las animaciones
  • La segundo donde podremos establecer mediante porcentajes tanto puntos intermedios como queramos

Aquí podemos ver un ejemplo de cada caso

 

Ilustraremos todo esto con un ejemplo simple, un pulso.

See the Pen CSS3 Animation Pulse Example by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Para más información podéis visitar la referencia en MDN y la página de W3C School.

El ejemplo completo se puede descargar desde mi repositorio.