Animaciones en CSS

Un esquema básico del funcionamiento de las animaciones en CSS.

Las animaciones en CSS3 (en inglés, CSS animations) forman un módulo que permite animar las transiciones entre diferentes propiedades de los elementos de un documento HTML. Consta de dos partes: un estilo que describe condiciones específicas de la animación y una serie de fotogramas que indican tanto el estado inicial y final como secuencias intermedias.​ Cuenta con contabilidad, entre otros, con los navegadores Google Chrome, Firefox, Microsoft Edge y Internet Explorer (desde las versiones 4, 5, 12 y 10, respectivamente).​

Funcionamiento

Con @keyframes es posible definir diferentes puntos por los cuales debe transitar la animación.​ En el siguiente ejemplo, que lleva a cabo un movimiento desde la izquierda hasta la derecha de la pantalla, se especifican solo el momento inicial y el final:

@keyframes ejemplo{
  from {left:0;}
  to {left:100%;}
}

Lo que marca la diferencia entre esta regla y la propiedad transition es la posibilidad de definir múltiples fotogramas concretos para la animación mediante la especificación de porcentajes.​ La regla mostrada a continuación cambiaría el color de fondo de un elemento de forma paulatina,​ desde rojo hasta azul, pasando por el naranja, amarillo y verde, a la par que se desplaza en un movimiento dextrógiro:

@keyframes ejemplo-color {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:orange; left:200px; top:0px;}
  50%  {background-color:yellow; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:blue; left:0px; top:0px;}
}

Para aplicar estos @keyframes es necesario añadir al menos las siguientes propiedades al elemento HTML a animar (por ejemplo, un div):​

div {
  animation-name: ejemplo;
  animation-duration: 4s;
}

Propiedades

La propiedad animation cuenta con varias sub-propiedades —con diferentes valores— que configuran aspectos concretos de la animación definida con @keyframes, como la duración o el número de repeticiones.​ Estos son todos los atributos modificables:​​

• animation-delay: retraso que se aplica al inicio de la animación.
• animation-direction: indica si la animación retrocede hasta el fotograma de inicio al finalizar la secuencia o si comienza desde el principio al llegar al terminar, entre otras opciones.​
• animation-duration: marca la duración de cada ciclo completo de.
• animation-fill-mode: permite definir el @keyframes visible cuando la animación no se esté ejecutando.
• animation-iteration-count: define el número de repeticiones de la animación. Es posible indicar el valor infinite para que los ciclos sean ininterrumpidos.
• animation-name: especifica el nombre de una o más animaciones que se asignan al elemento HTML.
• animation-play-state: permite pausar y reanudar la secuencia.
• animation-timing-function: señala el ritmo de la animación.

La propiedad abreviada animation posibilita agrupar todas las sub-propiedades en una sola, como se muestra en el ejemplo siguiente:​

/*animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.*/
div {
  animation: ejemplo 4s ease 1s 1 normal none running;
}

Gráficos vectoriales escalables

SVG animado usando CSS3.

Además de hover los SVG admiten la regla @keyframes, lo que permite animar un conjunto limitado de transformaciones. Firefox y Chrome usaron las extensiones @-moz-keyframes y @-webkit-keyframes, respectivamente, antes de que se agregara @keyframes a la especificación CSS3.​

Controversia

El desarrollo de las animaciones CSS despertó en un comienzo «la preocupación de aquellos que prefieren la animación a través de JavaScript» o,​ en menor medida, el lenguaje SMIL; otros medios afirmaron que se trataba de un movimiento de Apple Inc., el patrocinador principal del proyecto WebKit, para eludir la inclusión de Adobe Flash (y las animaciones Flash) en la línea iOS de la empresa de dispositivos móviles que utilizan Safari.​​​

Véase también

• CSS Flexible Box Layout
• CSS grid layout

Enlaces externos

• Historial de publicaciones por la W3C

• Datos: Q382741