Las nuevas características de CSS nos permiten añadir efectos de animación a la mayoría de elementos HTML, sin necesidad de Javascript o Flash. Por el momento, es compatible con los navegadores WebKit -incluyendo Safari, Safari para iOS y Chrome- y Firefox. Está previsto que Internet Explorer, a partir de su versión 10, también tenga soporte para este tipo de animaciones. Debido a que la tecnología es relativamente nueva, se debe añadir un prefijo con el motor del navegador. En nuestro caso, los ejemplos los realizaremos con los prefijos webkit y moz.

Las animaciones se apoyan en el uso de fotogramas clave -al igual que ocurre con Flash- para crear estados y realizar una transición entre ellos. Así para una animación de una única iteración crearíamos un punto de inicio y un punto final. La animación transcurriría entre estos dos puntos o estados.

PROPIEDADES

• animation-name: En esta propiedad debemos indicar el nombre de la animación a la que hacemos referencia.
• animation-duration: En esta propiedad especificamos el número de segundos o milisegundos de la animación, aceptando valores decimales. Siendo el valor por defecto 0, es decir sin animación.
• animation-iteration-count: En esta propiedad debemos indicar cuantas veces queremos que se repita nuestra animación. Aceptando números enteros e "infinite" para que no deje de repetirse nunca.
• animation-direction: Desde esta propiedad podemos definir si la dirección de nuestra animación es normal o por el contrario preferimos que sea a la inversa en ciclos alternos, alternate.
• animation-timing-function: En esta propiedad podemos definir el modo en que se ejecutará nuestra animación. La curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. La opción por defecto es "ease". Las otras opciones son: "linear", "ease-in", "ease-out", "ease-in-out", y "cubic-bezier".
• animation-fill-mode: Esta propiedad permite definir el estilo antes o después de que se ejecute la animación. La opción forwards aplicará el valor de las propiedades definidas en su último fotograma clave o en el 100%, después de ejecutar la iteración final de la animación. La opción backwards aplicará el valor de las propiedades definidas en el primer fotograma clave o en el 0%. La opción both aplicará el valor de las propiedades al principio y al final. La opción none no aplicará el valor de las propiedades.
• animation-delay: En esta propiedad podemos definir en segundos o milisegundos con que retardo queremos activar nuestra animación.
• animation-play-state: Con esta propiedad podemos pausar y volver a poner en marcha nuestra animación.

Existe una versión corta, denominada "Shorthand Property" que combina 6 de las propiedades en una sóla. Su sintaxis es:

[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]

Para lograr una animación debemos conectar una animación a un elemento en la CSS. Aunque hasta el momento parezca que es un proceso complejo, vamos a realizar un primer ejemplo con una caja, y veremos que en realidad es bastante sencillo:

<div class="caja1"></div>

Ahora le asignamos el siguiente CSS:

.caja1{
	width:100px;
	height:100px;
	background:#FF0000;
	position:absolute;
	top:0;
}

Ahora establecemos una animación que denominaremos "mover_caja":

/* Para navegadores webkit */
@-webkit-keyframes mover_caja{
	0%{left:90%;}
	50%{left:10%;}
	100%{left:90%;}
}
/* Para Firefox */
@-moz-keyframes mover_caja{
	0%{left:90%;}
	50%{left:10%;}
	100%{left:90%;}
}

Los fotogramas clave que hemos establecido en la animación están en el 0% (inicio), el 50% (la mitad) y el 100% (al final). Las propiedades que hemos establecido en estos fotogramas clave son las diferentes posiciones. Nuestro último paso es "enganchar" la animación con el objeto que queramos. Vamos a aplicarlo a "caja1".

.caja1{
	-webkit-animation:mover_caja 5s infinite;
	-moz-animation:mover_caja 5s infinite;
}

Ver ejemplo en funcionamiento » »

En el siguiente ejemplo vamos a realizar una animación rotando una capa y escalándola. El ejemplo completo sería:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animation 2</title>
<style type="text/css">
#contenido{
	width:700px;
	margin:0 auto;
	padding:50px;
	position:relative;
	background:#FFF;
}
.circulo {
	display:table-cell;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	height:100px;
	width:100px;
	background:#dedede;
	text-align:center;
	vertical-align:middle;
}
.circulo span{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

/* Para navegadores webkit */
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}

/* Para firefox */
@-moz-keyframes rotar
{
	0% {-moz-transform:scale(1) rotate(0deg);}
	50% {-moz-transform:scale(1.5) rotate(180deg);}
	100% {-moz-transform:scale(1) rotate(360deg);}
}

.circulo
{
	-webkit-animation:rotar 4s infinite;
	-moz-animation:rotar 4s infinite;
}
</style>
</head>
<body>
<div id="contenido">
	<div class="circulo"><span>webintenta</span></div>
</div>
</body>
</html>

Ver ejemplo en funcionamiento » »

El siguiente ejemplo muestra cómo realizar una transición entre colores.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animation 3</title>
<style type="text/css">
#contenido{
	width:700px;
	margin:0 auto;
	padding:50px;
	position:relative;
	background:#FFF;
}
.circulo {
	display:table-cell;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	height:100px;
	width:100px;
	background:#dedede;
	text-align:center;
	vertical-align:middle;
}

/* Para navegadores webkit */
@-webkit-keyframes cambiar_color
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

/* Para firefox */
@-moz-keyframes cambiar_color 
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

.circulo
{
	-webkit-animation:cambiar_color 8s linear 1;
	-moz-animation:cambiar_color 8s linear 1;
}
</style>
</head>
<body>
<div id="contenido">
	<div class="circulo"></div>
</div>
</body>
</html>

Ver ejemplo en funcionamiento » »