Animaciones en CSS3

Tradicionalmente cuando queríamos incluir cualquier tipo de animación en nuestras páginas webs teníamos que recurrir a tecnologías como Flash o JavaScript. Si bien la potencia de los dos citados es descomunal en comparación, las nuevas funciones de animación de CSS3 abren una nueva puerta a nuestra imaginación, sin tener que depender de tecnologías extras.

Fotogramas claves de las animaciones en CSS3

Para aquellos que son flasheros el concepto de fotograma clave no necesita explicación. Si no te encuentras entre los adeptos del programa de Adobe, es importante que entiendas bien este concepto antes de continuar.

Un fotograma clave no es más que un punto destacado en el tiempo de nuestra animación. Cualquier animación consta al menos de dos fotogramas claves: el punto inicial y el punto final. Imaginad que nuestra animación es como una carretera:

No se en vuestra ciudad, pero en la mía los semáforos son verdes

El primer semáforo actuaría como fotograma clave inicial y el segundo como el final. Entre uno y otro se produciría nuestra animación, que no es más que el desplazamiento del coche hacia la derecha.

@keyframes

En CSS3 creamos animaciones completas mediante @keyframes, que son un conjunto de fotogramas clave. Su sintaxis es la siguiente:

Código :

/*@keyframe nombreAnimacion{ 
     puntoDelKeyframe{ 
          atributosIniciales; 
     } 
     puntoDelKeyframe{ 
          nuevosAtributos; 
     } 
 
     ....... 
 
     puntoDelKeyframe{ 
         últimosAtributos; 
     }*/ 
}

Un poco extraño ¿verdad? Tranquilo, es más fácil de lo que parece. Veamos que tendríamos que hacer para desplazar nuestro coche a la derecha:

Código :

@keyframe animacionCoche{ 
     /*Indicamos que salimos de la posición 0*/ 
      from{ 
          left:0px; 
     } 
     /*Indicamos que al final la posición debe ser 350*/ 
     to{ 
          left:350px; 
     } 
}

Podemos crear animaciones más complejas estableciendo fotogramas claves intermedios mediante porcentajes:

Código :

@keyframe animacionCoche{ 
      from{ 
          left:0px; 
     } 
    /*Hasta el 65% de la reproducción solo queremos que se desplace 10 pixels*/ 
     65%{ 
          left:10px; 
     } 
     to{ 
          left:350px; 
     } 
}

Aplicando la animación a un elemento

Hemos creado nuestra animación. Para aplicarla sobre un elemento de nuestra página, deberemos acudir al mismo y agregarle el atributo de animación:

Código :

#coche{ 
     animation-name: animacionCoche; 
     animation-duration: 3s; 
     animation-iteration-count: 1; 
     position:relative; 
}

En este enlace podéis ver una animación que convierte varios atributos como la posición y el ancho de un objeto.

Hay tres nuevos atributos que no habíamos visto antes. Estos y otros tantos conforman los atributos destinados a la animación que describo a continuación:

• animation-name. Indica a que animación responde nuestro elemento. Es posible definir más de una animación usando comas como separador.
  
• animation-duration. Define la duración en segundos de nuestra animación.
  
• animation-iteration-count. Define cuantas veces se reproduce la animación. Podemos darle el valor infinite para que se reproduzca hasta el fin de los tiempos.
  
• animation-direction. Por defecto nuestra animación se reproducirá hacia delante, como es lógico. Sin embargo si le damos el valor alternate, al reproducirse completamente la animación esta volverá a reproducirse en sentido opuesto, es decir, como si se rebobinase.
  
• animation-delay. Indica si se produce un retardo en el inicio de la animación.
  
• animation. El shorthand de todos los anteriores.
  
• animation-timing-function. Define como progresa la animación entre los keyframes mediante ecuaciones matemáticas.

animation-timing-function

Es posible que la definición que acabas de leer sobre el atributo animation-timing-function te ha dejado pensando WTF. este atributo sirve para aplicar un efecto de suavizado a la animación.

Por defecto responde al valor ease, pero puede responder a diferentes valores:

• ease
  
• linear
  
• ease-in
  
• ease-out
  
• ease-in-out

Es terriblemente complejo describir estos efectos con palabras, así que lo mejor es que veáis estos ejemplos.

En el próximo capítulo cerraremos el curso con una serie de conclusiones, agradecimientos y saludos .

Información adicional

® Cristalab 2011

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.