Como posiblemente sepamos, durante las primeras décadas de existencia de la web, las animaciones se tenían que realizar utilizando diversas tecnologías accesorias, más allá del simple HTML o CSS. El primer sistema que alcanzó gran popularidad para realizar una animación fueron los Gif animados, que nos permitían embutir dentro de una imagen ciertos efectos sencillos. Luego vino Flash, que revolucionó la web creando animaciones vectoralas de elementos bastante fluidas y espectaculares.Le acompañaron algunos otros sistemas como Silverlight, de características similares, sin embargo, ninguno de estos sistemas existe a día de hoy y además se basaban en tecnologías propietarias, que requerían la instalación de un plugin para funcionar en el navegador.

En cuanto a los GIF animados, es verdad que ofrecen soportes para animación que sí forman parte de las tecnologías de creación de páginas web universales, pero que no llegan ni de lejos a las posibilidades de animación que podríamos desear. Los GIF animados se utilizaron al principio, pero lo cierto es que ahora están prácticamente olvidados el objetivo de producir animaciones.

Otra alternativa para animar elementos en la página es Javascript que permite cambiar atributos CSS de manera progresiva a lo largo de un tiempo, con lo que se producen animaciones en la página. Sin embargo, las animaciones de Javascript tampoco suelen ser adecuadas, porque no usan todas las capacidades disponibles actualmente en los navegadores. Es cierto que con Javascript podemos decir cuándo debería de comenzar una animación (por ejemplo asignando dinámicamente una clase CSS a un elemento cuando se hace clic en un botón), pero lo que es la definición de la animación en sí, debería de realizarse con CSS.

Bien, pues con CSS 3 viene una nueva forma de realizar animaciones totalmente novedosa y que resultará mucho más sencilla que el uso que podemos conocer con Javascript. Pero lo que es más importante, que soporta muchos más tipos de animación que hasta ahora estaban reservados a tecnologías como Flash, como pueden ser rotaciones, ampliaciones y reducciones del tamaño vectoriales, etc. Y lo mejor, todo ello de manera estándar y aprovechando las características nativas más avanzadas de los navegadores, lo que nos permite también mejorar sensiblemente el rendimiento de las páginas.

Además, todo ello sin tener que programar, lo que puede resultar mucho más agradable y al alcance de los desarrolladores menos técnicos.

Ventajas de las animaciones CSS 3

Las animaciones CSS permiten hacer muchas de las cosas que antes teníamos reservadas sólo al uso de tecnologías supletorias, que no hacían más que incrementar la dificultad del desarrollo, limitar su compatibilidad entre distintos tipos de usuarios y plataformas, así como los requisitos de conocimientos del desarrollador para poder incorporarlas.

Por tanto, una de las ventajas es que nos podemos olvidar de Flash si queremos hacer dinamismos espectaculares en nuestra web. Dejar a Flash de lado además implica que no tenemos que preocuparnos por el posicionamiento de la página que tantos quebraderos de cabeza provoca cuando nuestra web esta creada en enteramente en Flash. Todo esto sin entrar en el tema de la accesibilidad, en el que Flash es un verdadero quebradero de cabeza.

Pero, como dejábamos entrever, las ventajas más importantes serían la compatibilidad y la facilidad de implementación, al usar un lenguaje que ya resulta familiar para el desarrollador. La compatibilidad viene dada por por el uso de un sistema abierto y regulado por el W3C, al que todos los navegadores tarde o temprano se adaptarán. Y la facilidad de desarrollo porque sólo trabajaremos en nuestros sitios con el lenguaje CSS y no existirá la necesidad de dominar otros lenguajes de programación como ocurría con Flash.

Inconvenientes de las animaciones CSS

ACTUALIZADO: No existen desventajas actualmente para las animaciones CSS.

Como todo en la vida, también existen algunas desventajas al trabajar con animaciones en CSS. Lo cierto es que la mayor que se podría destacar es sólo circunstancial, debido al poco soporte que existe actualmente a esta utilidad. Tenemos dos principales inconvenientes.

En el momento de escribir este artículo las animaciones CSS no son admitidas por los principales navegadores (Ninguna utilidad para animación con CSS 3 se puede utilizar en Internet Explorer y en Firefox algunas cosas ya podemos ver que funcionan a medias, pero aun le queda largo camino por recorrer).

Consume bastantes recursos de máquina para producir las animaciones.Finalmente, volvemos a remarcar que, debido a la imposibilidad de ver los resultados en todos los clientes web, al menos por el momento, deberemos utilizar navegadores basados en Webkit, como son Safari o Google Chrome (siempre en su versión mas actualizada).

También podremos encontrar que existe alguna dificultad a la hora de la programación, pero no más de la que encontraríamos si tuviésemos que utilizar otros lenguajes o tecnologías distintos de CSS.

Conceptos básicos para las animaciones CSS

Para seguir nuestra introducción a las animaciones CSS, vamos a introducir algunos conceptos importantes que debes de empezar a conocer.

Fotograma clave

Los fotogramas claves son valores iniciales y finales que debe tener la animación CSS. Estas localizaciones, en teoría, las sabemos a ciencia cierta, es decir, siempre conocemos en que punto vamos a empezar y en cual vamos a terminar la animación, así como su duración. Pero podemos crear otros fotogramas clave, no solamente los de inicio y fin, que correspondan con puntos intermedios del movimiento. Las reglas que determinan estos valores es lo que llamamos fotogramas clave dentro de CSS.

Su sintaxis seria algo parecido a esto:

@keyframes nombre_fotograma_clave {
   0% {
      left: 100px;
   }
   40% {
      left: 150px;
   }
   60% {
      left: 75px;
   }
   100% {
      left: 100px;
   }
}

Esta animación estaría compuesta de 4 fotogramas clave, el porcentaje es en el momento de la animación en el que va a producirse ese fotograma y los px son la unidad de medida CSS que usamos para producir un movimiento para cada uno de los fotogramas dentro de la animación, que harán que cierto elemento de la página se vaya desplazando.

Pongamos que deseamos aplicar esta animación sobre las etiquetas DIV, entonces necesitamos usar el siguiente código CSS:

div {
   animation-name: 'nombre-fotograma-clave';
   animation-duration: 45s;
   animation-iteration-count: 10;
}

Los atributos de estilo para esta capa que se ven en el código anterior son los siguientes:

• animation-name: el nombre del fotograma clave.
• animation-duration: la duración de la animación.
• animation-iteration-count: la veces que se repite.

Propiedades sobre la animación aplicables en el elemento animado

Esta sería una lista de las propiedades adicionales, aplicables para definir las animaciones que especificamos en el selector del elemento al que hemos aplicado la animación:

• animation-timing-function: se aplica entre los fotogramas clave, no sobre toda la animación y describe como progresa la animación a lo largo de un ciclo.
• animation-direction: esta propiedad define el sentido de la animación. Si especificamos “alternate” y los ciclos de iteraccion son impares, la animación irá en la dirección normal, si no, se realizará en la dirección inversa
• animation-delay: propiedad que nos indica el momento en el que comenzará la animación. Si el valor es 0 se ejecuta en cuanta se carga la página.
• animation: esta propiedad combina las anteriores de una forma resumida.

Código completo para una animación CSS

A continuación veremos un código CSS donde estamos definiendo una animación, aunque todavía hay algunas cosas que tenemos que contaros antes de hacer nuestra primera página de prueba. Pero de momento aquí tenéis un ejemplo utilizando el fotograma clave y las propiedades de una animación:

div {
   animation-name: movimiento-diagonal;
   animation-duration: 5s;
   animation-iteration-count: 10;
}

@keyframes movimiento-diagonal {
   from {
      left: 0;
      top: 0;
   }
   to {
      left: 100px;
      top: 100px;
   }
}

Este ejemplo lo que nos mostraría seria una animación en la que se mueve un elemento de la esquina inferior izquierda a la esquina superior derecha, ese movimiento va a tardar 5 segundos y se va a repetir 10 veces.

Con estos conceptos podemos decir que estamos preparados para comenzar un ejemplo muy básico de animación dentro de una página web. Recordando siempre que no funciona actualmente en todos los navegadores y que trabajamos con CSS 3 y HTML 5 Que actualmente puedes usar en cualquier navegador.

Animación de movimiento derecha/zquierda con CSS 3

Ahora vamos a realizar nuestro primer ejemplo ya completo de animación CSS. Veremos que todo es bastante sencillo y que con unas pocas líneas de código CSS se pueden hacer cosas bastante interesantes. Por lo menos, para los que hayan estudiado un poco sobre la animación realizada con otras tecnologías como Javascript, quedará claro que las animaciones CSS son mucho más fáciles y rápidas de producir.

Afortunadamente, en el momento de revisión de este artículo las especificaciones de CSS 3 están confirmadas por lo que todos los atributos que necesitamos de Hojas de Estilo en Cascada para animación están funcionando en todas partes. Sin embargo, combiene mencionar que siempre tenemos disponibles los prefijos, atributos especiales que sólo entienden los navegadores de un tipo. Estos atributos son exactamente iguales a los que comentábamos en el artículo de los conceptos sobre animaciones CSS, lo único que tenemos que añadir el prefijo correspondiente, por ejemplo -webkit- para Chrome, antes del nombre de cada uno de ellos.

Para comenzar la práctica, lo primero que tenemos que hacer es crearnos nuestros fotogramas clave, para ello utilizamos el siguiente código en nuestra hoja de estilos.

@keyframes movimiento-lateral {
   from {
      left: 0px;
   }
   to {
      left: 100px;
   }
}

Ya que comentábamos el tema de los prefijos, decir que si se desean usar, cosa que ya no es necesaria, tendrías que comenzar con el atributo @-webkit-keyframes en lugar de simplemente @keyframes. También te viene bien saberlo por si encuentras código desactualizado en DesarrolloWeb.com o en otros sitios web.

Como ya se comentó anteriormente, lo que se ha definido en el código anterior es un par de fotogramas clave, que corresponden con el inicio y el fin de la animación. En la práctica ésto hace que se nos mueva nuestro texto, de izquierda a derecha de 0px a 100 px.

Una vez que tenemos este primer paso, vamos a darle las propiedades necesarias a la capa correspondiente, para terminar de definir nuestra animación:

#anim {
   animation-name: movimiento-lateral;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-direction: alternate;/*para que vuelva a su posicion inicial */
   width: 100px;
   background-color: Teal;
   color: #fff;
   position: relative;
   padding: 2px;
}

Insistiendo de nuevo en el tema de los prefijos, este sería el código CSS si los estamos usando para "webkit" (navegadores safari y de la familia de Chrome).

#anim {
   -webkit-animation-name: movimiento-lateral;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   width: 100px;
   background-color: Teal;
   color: #fff;
   position: relative;
   padding: 2px;
}

En la primera linea le damos el nombre a la animación, que tiene que ser el mismo que el del fotograma clave.

En la segunda le damos una duración de 3 segundos, es decir, la animación tardará en hacer el recorrido sólo 3 segundos.

En la tercera le decimos que lo repita infinitas veces.

La propiedad animation-direction: alternate; hace que el texto, una vez que haga el recorrido, vuelva a su posición inicial realizando el camino inverso.

Y por último le damos un ancho, y color de fondo y de texto, así como una posición relativa, ya que de lo contrario no funcionaria nuestra animación.

Con esto nuestro código CSS estaría completo, ahora sólo nos quedaría integrarlo en una web. Para que nos sea más sencillo vamos a colocar todo el código CSS y el código HTML junto en el mismo archivo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animaciones CSS</title>
  <style>
    @keyframes movimiento-lateral {
      from {
          left: 0px;
      }
      to {
          left: 100px;
      }
    }   

    #anim {
      animation-name: movimiento-lateral;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-direction: alternate;/*para que vuelva a su posicion inicial */
      width: 100px;
      background-color: Teal;
      color: #fff;
      position: relative;
      padding: 2px;
    }
  </style>
</head>
<body>
  
  <div id="anim">Esto es una animación</div>

</body>
</html>

En el siguiente articulo realizaremos un ejemplo algo más complicado para crear un fondo en movimiento, del tipo de las pantallas de matrix.

Videotutorial de animaciones CSS3

En DesarrolloWeb.com hemos abordado el tema de las animaciones CSS en diferentes ocasiones. Si te interesa el tema te recomendamos este vídeo donde explicamos la animación CSS, sus usos y posibilidades, en una presentación en directo emitida en 2015 con Joan León.

Además, también puedes ver la grabación de un evento en directo que emitimos en 2012, en el que hablamos sobre animaciones CSS. Se trata de una presentación que se impartió cuando eran toda una novedad. Hoy quizás no nos quedaríamos tan sorprendidos sobre las animaciones que se muestran en este vídeo, pero siguen siendo una buena muestra de las posibilidades, para quienes quieren comenzar a realizar sus animaciones en CSS. Te ofrecerá una visión global sobre cómo se realizan y algunas ideas de animaciones interesantes. Esperamos que os guste!