Animaciones con CSS3

En las secciones de transformaciones 2D y 3D se ven animaciones realizadas cambindo porpiedades de estilos mediante Javascript. Son animaciones, pero programadas. Pues bien, CSS3 permite animaciones sin usar scripts, permite que la apariencia de un bloque cambie en el tiempo, se pueden hacer animaciones reales usando solo estilos CSS3. Mediante esta técnica podremos hacer que cambie cualquier propiedad de forma gradual, en un tiempo determinado, a una velocidad concreta, que se repita en bucle....

@keyframes

El primer paso para poner una animación en nuestra página es crear la regla apropiada mediante @keyframes. Esta regla se usa para definir la animación, es decir, para definir las propiedades del estilo que van a cambiar.

<style>

@keyframes animarfondo

{

from {background: red;}

to {background: yellow;}

}

.caja

{

width: 300px;

height: 300px;

animation: animarfondo 5s infinite;

}

</style>

En este ejemplo definimos una animación que mostrará el fondo cambiando desde rojo a amarillo. Pero ahor queda aplicarla a un bloque

<body>

<div class="caja"></div>

</body>

Esta clase caja aplicada a un elemento, un bloque div por ejemplo, hará que su color de fondo cambie de rojo a amarillo en 5s y que se repita de forma indefinida.

Aquí el fondo cambia de RED hasta YELLOW en 5 segundos y se repite el bucle continuamente(atributo infinite)

La regla @keyframes describe cada paso de la animación, en el ejemplo se ha usado para un cambio continuo de princiio (from) a fin (to), pero se puede trocear en pasos usando porcentajes. El cuadro de abajo cambia en cuatro pasos

<head>

<style>

@keyframes anim_pasos

{

0% {top:0px; left:0px; background:black; color:white}

25% {top:0px; left:100px; background:blue;color:yellow}

50% {top:100px; left:100px; background:yellow;color:blue}

75% {top:100px; left:0px; background:green;color:white}

100% {top:0px; left:0px; background:black;color:white}

}

.caja

{

width: 300px;

height: 300px;

animation: anim_pasos 5s infinite;

}

</style>

</head>

<body>

<div class="caja"></div>

</body>

En este otro ejemplo puedes ver como el fondo cambia en cuatro fases y sin usar scripts para nada: solo las reglas CSS.
En algunos casos las animaciones CSS pueden sustituir perfectamente a imágenes animadas y a algunas animaciones flash sencillas. Son útiles para llamar la atención del usuario sobre algun elemento.
No abuses de ellas.