En la entrada de introducción sobre animaciones veíamos el funcionamiento básico sobre el ejemplo de rotar una imagen. En resumen, podíamos hacer que el navegador animase el cambio en una clase CSS eligiendo la duración y la función de interpolación y esto funcionaba con cualquier valor interpolable, es decir, que pudiera ser transformado en valores numéricos.

Respecto a la función de animación veíamos las que venían por defecto implementadas y usábamos ease-in-out. Hoy vamos a ver como podemos personalizar más la animación. El sistema para personalización de animaciones de CSS3 es similar al de cualquier programa de animación, basándose en “keyframes” o fotogramas clave.

@-moz-keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}
}

@-webkit-keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}
}

@-ms-keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}
}

@-o-keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}
}

@keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}

}

#miImagen{
animation: movimiento 4s 4 alternate;
-moz-animation: movimiento 4s 4 alternate;
-webkit-animation: movimiento 4s 4 alternate;
-o-animation: movimiento 4s 4 alternate;
-ms-animation: movimiento 4s 4 alternate;
}

tictac

Imaginemos una animación consistente en un desplazamiento de una imagen. Podemos querer que la imagen al principio se mueva muy lento, y después se mueva muy rápido. En el modelo de keyframes, deberíamos insertar un keyframe en el momento inicial y otro en el momento que queremos que acabe el movimiento lento, entre estos dos frames el movimiento será lento. Después añadiríamos otro frame al final para definir el movimiento rápido en la última parte de la animación. El ejemplo sería algo así:
@keyframes movimiento{
0% {margin-left:0px;}
75% {margin-left:50px;}
100% {margin-left: 400px;}
}

Como se ve en el ejemplo, cada keyframe se define como el % de tiempo de la animación en el que tiene que suceder. Si pusiéramos a funcionar esta animación con una duración de 4 segundos. Durante los primeros 3 segundos movería la imagen 50 píxeles a la derecha, y entre el segundo 3 y 4 movería otros 350 píxeles a la derecha la imagen, consiguiendo ese efecto de primero lento y después rápido.

La sintaxis de una animación es @keyframe {}. Donde cada frame es: <%en el que sucede>{propiedades}. Siendo propiedades cualquier propiedad CSS interpolable.
Como la animación CSS es relativamente nueva, todavía no está soportada por todos los navegadores, y donde lo está, o se la espera es con prefijo propietario. Ahora mismo solo Firefox y navegadores webkit (Chrome, Safari, Android) hacen que funcione, pero Internet Explorer 10 y Opera 12 lo incluirán. Así que además de la versión sin prefijo para compatibilidad futura, deberíamos usar un CSS repetido del estilo del siguiente:
@-moz-keyframes movimiento{
...
}


@-ms-keyframes movimiento{
...
}


@-webkit-keyframes movimiento{
...
}


@-o-keyframes movimiento{
...
}


@keyframes movimiento{
...
}
Y nos falta saber como unimos esta animación a un elemento en concreto, la versión corta sería:
#miImagen{
animation: movimiento 4s 4 alternate-reverse;
}
Donde primero especificamos el nombre de la animación a utilizar, lo segundo es la duración, en este caso, 4 segundos. Después el número de repeticiones de la animación y por último la dirección, con alternate-reverse hacemos que primero haga el movimiento hacia la derecha y después lo haga al revés para volver a la posición inicial, por lo que las 4 repeticiones que hemos puesto son en realidad 2 completas, es decir, dos de ida y dos de vuelta.
El ejemplo completo es el que está como cabecera del artículo. Se pueden personalizar mucho más las animaciones, y hay más opciones que no hemos abordado todavía y que iremos desgranando en próximas entregas.