Pequeña introducción de animaciones keyframe con CSS3

Ya sabemos usar la propiedad transition en CSS3, con la cuál tenemos la posibilidad de hacer pequeñas animaciones cuando se presenta algún evento con nuestros elementos HTML. Sin embargo las animaciones están aferradas al cambio de un estado a otro, por lo que hacer propiamente una animación pura sería imposible si usamos transition.

En cambio hoy vamos a ver una pequeña introducción de animaciones keyframe con CSS3, con la cuál sí podremos configurar una animación sencilla usando las propiedades CSS3 y dos propiedades nuevas en CSS3: animation y keyframes, así que no se pierdan el tutorial de hoy.

Demo del tutorial | Archivos del tutorial

Introducción

Con CSS3 se introduce el concepto de animaciones, con las que podemos realizar animaciones reales usando las propiedades que nos da CSS3. La función es como el uso avanzado de la propiedad transition, sólo que ahora no nos limitamos a un cambio de comportamiento en elementos para poder realizar animaciones.

Para poder crear animaciones con CSS3 necesitamos de dos pasos fundamentales. El primer paso es darle un nombre a nuestra animación, para poder identificarla y no caer en el error de que se confunden con varias animaciones. El segundo paso es especificar los keyframes, o fotogramas, con los que podremos determinar lo que se va a hacer en un periodo de tiempo.

Entonces, sin más interrupciones entremos a nuestro tutorial.

HTML

La idea del tutorial es ver cómo funcionan las animaciones, por lo que haremos una sencilla animación usando un sprite,

que vamos a usar en una capa como imagen de fondo, y usando las animaciones en CSS3 vamos a hacer que la imagen se mueva para hacer un efecto de animación, que es el objetivo de un sprite. Esta es la base de la animación en prácticamente todo en la televisión y cine, y hoy lo recrearemos.

CSS

Lo importante empieza usando hojas de estilo. Lo primero es hacer una regla para nuestra capa, le configuramos los valores de ancho y alto para que nuestro sprite muestre sólo la primera imagen y lo demás quede oculto. Todo normal hasta que llegamos a la propiedad animation. Y es que como lo decía en la introducción, necesitamos darle un nombre a nuestra animación, que está asociada a nuestra capa, en este caso le decimos que se llama “kof”.

Lo siguiente es decirle la duración de toda la animación, independientemente de lo que hagamos el tiempo total será el que nosotros especifiquemos. Para que se pueda crear un efecto de animación continua le puse 0.9 segundos, pero podemos poner la cantidad que queramos. Un salto más vemos una sub-propiedad más que nos permite configurar si la animación se queda donde acaba o se regresa al inicio, en este caso le configuro que se siga, si no le pongo animation-fill-mode: forwards automáticamente se regresa al inicio la animación. Recuerden que tenemos que hacer esto para el estándar y para los prefijos de los navegadores.

Ya le dimos un nombre, lo que nos falta es configurar los keyframes o fotogramas. Con CSS podemos usar dos formas de configurar, decir from{} to{} para configurar lo que tiene que pasar antes y después, o usar porcentajes para configurarlo. Nosotros vamos a ver los porcentajes. Y es que nuestra animación se configura de acuerdo al porcentaje de avance de nuestra animación, siendo 0% cuando inicia, y 100% cuando termina la animación. Tenemos por decirlo así 100 fotogramas para nuestra animación.

Entonces, por tal motivo usamos @keyframes kof{} para decirle que la configuración va a ser a la animación kof, la que configuramos en el paso anterior. Después vamos a especificar un porcentaje y dentro de ese vamos a configurar las propiedades CSS que queremos animar, definiéndolo como normalmente lo hacemos:

En nuestro caso nuestro sprite tiene 11 etapas, por lo que divido el 100% en 11 partes para que cada 9% cambie la animación, que en este casi es la animación del fondo y el margen para dar la ilusión de movimiento.

Por último hay que decir que si bien es fácil la implementación inicial, la modificación es tediosa, más porque también la regla @keyframes tiene que hacerse para el estándar como para los prefijos de Webkit y Mozilla, lo que hace aburrido y cansado modificar los tres.

Conclusiones

Esta función de CSS3 no está todavía tan extendida en todos los navegadores como IE u Opera, pero sin duda que es una gran ventaja tener estas funciones porque demuestran que los estándares quieren abandonar el uso de Flash por completo, aunque en estos momentos las animaciones sean básicas con el uso de jQuery u otros frameworks le da cierta pelea a Flash.