> Manuales > Manual de CSS 3

Seguimos con el tema de las animaciones CSS y repasamos los conceptos y propiedades más básicas para poder crear una animación simple con CSS 3.

Estamos continuando con la serie de artículos sobre animaciones CSS, una utilidad que sin duda se convertirá en un gran aliado de los diseñadores para crear webs más impactantes y basadas en estándares web. Hay que decir que, aunque en el momento de escribir estos artículos las animaciones CSS están disponibles tan solo en navegadores basados en Webkit, como Google Chorme, en poco tiempo serán compatibles con todos los navegadores.

Así pues, una vez que sabemos lo que es la animación CSS, podemos pasar a ver los conceptos clave que necesitamos para poder crear una animación.

Nota: Otros conceptos importantes a tener en cuenta que hemos visto en otras entregas de contenido dentro de DesarrolloWeb.com es la programación HTML 5 y la especificación CSS 3.

Conceptos clave que tenemos que conocer bien:

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 longitud y la alineación donde se colocaría el fotograma dentro del DIV en que se encaje.

El código de dicho DIV sería el siguiente:

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:

Propiedades sobre la animación aplicables en el DIV

Además de las propiedades que hemos citado en el párrafo anterior, tenemos otra serie de atributos que se pueden aplicar a la animación y que se colocan en el DIV.

Esta sería una lista de las propiedades adicionales, aplicables para definir las animaciones que especificamos en el DIV:

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.

Nota: Este código está incompleto todavía, porque sólo es un fragmento del CSS y faltaría la parte del HTML. De momento por ahora está bien, pero aun tenemos que explicar otras cosas sobre las animaciones CSS que debes saber sobre el estado actual de los navegadores y sus particularidades de compatibilidad con esta nueva capacidad de CSS 3. Pero no preocupoarse, porque en breve veremos un códico completo y funcionando, en el siguiente artículo.

Con estos conceptos podemos decir que estamos preparados para que en el siguiente artículo realicemos 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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual