Animaciones en CSS3

En CSS3 podemos crear animaciones que reemplacen a imágenes gif, elementos en Flash o de JavaScript.

Para hacer estas animaciones, es necesario definir un conjunto @keyframes, y dentro de él, las propiedades que irán cambiando gradualmente conforme avance la animación.

Soporte de navegadores

Internet explorer no soporta la propiedad animation ni la regla @keyframes
Chrome y Safari requieren el prefijo -webkit-
Firefox requiere el prefijo -moz-
Opera requiere el prefijo -o-

Podemos declarar los @keyframes de la siguiente manera:

@-webkit-keyframes mianimacion{
	from {background: #F00;}
	to {background: #0F0;}
}
@-moz-keyframes mianimacion{
	from {background: #F00;}
	to {background: #0F0;}
}
@-o-keyframes mianimacion{
	from {background: #F00;}
	to {background: #0F0;}
}
@keyframes mianimacion{
	from {background: #F00;}
	to {background: #0F0;}
}

Después de definir los @keyframes es necesario ligarlos a un selector.

Para aplicar la animación a un selector, debemos definir al menos el nombre de la animación que usaremos y su duración.

div{
	height: 50px;
	margin: 0 auto;
	width: 50px;
	
	-webkit-animation: mianimacion 3s;
	-moz-animation: mianimacion 3s;
	-o-animation: mianimacion 3s;
	animation: mianimacion 3s;
}

Por defecto la duración es 0, si no se especifica, la aniamción no tendrá efecto.

Otra manera de declarar los @keyframes es mediante porcentajes. El 100% es la duración total de la animación.

@-webkit-keyframes animacion2{
	0% {background: #F00;}
	50% {background: #00F;}
	100% {background: #0F0;}
}
@-moz-keyframes animacion2{
	0% {background: #F00;}
	50% {background: #00F;}
	100% {background: #0F0;}
}
@-o-keyframes animacion2{
	0% {background: #F00;}
	50% {background: #00F;}
	100% {background: #0F0;}
}
@keyframes animacion2{
	0% {background: #F00;}
	50% {background: #00F;}
	100% {background: #0F0;}
}

Las propiedades de animación son las siguientes:

@keyframes Declara los estado de animación
animation Propiedad general para declarar todos los valores, excepto animation-play-state
animation-name Especifica el nombre de los @keyframes a utilizar
animation-duration Define la duración de la animación
animation-timing-function Define el tipo de animación que se ejecutará, por defecto es ease
animation-delay Define si habrá un retraso para iniciar la animación, es 0 por defecto.
animation-iteration-count Especifica el número de veces que se ejecutará la animación, por defecto 1 vez
animation-direction Define si la animación se reproducirá en reversa en ciclos alternados, por defecto es normal
animation-play-state Especifica el estado de la animación, running por defecto o paused

div{
	background: #F00;
	border-radius:50%;
	height: 50px;
	margin: 0 auto;
	width: 50px;
	
	animation-name: animacion2;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}
/* O en una sóla línea */
div{
	background: #F00;
	border-radius:50%;
	height: 50px;
	margin: 0 auto;
	width: 50px;
	
	animation: animacion2 5s linear 2s infinite alternate;
}

Recuerda siempre colocar los prefijos en todas las propiedades que los necesiten.

En los siguientes videos podemos ver las animaciones en funcionamiento: