Animaciones con CSS3

Las animaciones en CSS representan una de las características más esperadas del nivel 3 de este estándar. Con la introducción del concepto de keyframes en CSS3, ahora es posible determinar una trayectoria para animar elementos.

Este es uno de los temas que mayor expectativa despierta cuando doy clases sobre HTML5 y CSS3. Una de las razones es porque esta es una de las características que permiten dejar atrás Flash y comenzar a tener nuevas opciones a la hora de crear animaciones para móviles.

En cuanto a su funcionamiento no es demasiado complejo. Podremos definir un nombre para la animación (animation-name), un tiempo de espera (animation-delay), un tiempo de duración (animation-duration), la cantidad de veces que se realizará (animation-iteration-count) y también el conjunto de reglas que se aplicarán para crear el efecto animado.

Para lograr compatibilidad con versiones anteriores de los navegadores, podremos utilizar los siguientes prefijo: Chrome y Safari (-webkit), y Firefox (-moz).

A continuación veremos un ejemplo donde cambiaremos el ancho a un elemento:

@keyframes animar
{
from {width: 100px;}
to {width: 200px;}

@-moz-keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

@-webkit-keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

El nombre de la animación (en este caso animar) se puede cambiar por el que deseemos. También es posible modificar o agregar otras propiedades para animar. Cabe mencionar que también deberemos crear una regla para el elemento que deseemos animar (por ejemplo un div), asignando el nombre de la animación y el tiempo que tardará en realizarla (entre otros parámetros posible). Veamos a continuación:

div
{
animation: animar 5s;
-moz-animation: animar 5s;
-webkit-animation: animar 5s;
-o-animation: animar 5s;
}

Para saber más sobre el tema podemos leer la información que nos ofrece el W3C en el documento CSS Animations.

¿Te interesa aprender más sobre como integrar HTML5 y CSS3 en tus sitios Web? Puedes escribirnos.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes y herramientas para Desarrollo Web y móvil en modalidad online y presencial.