Crear animaciones con CSS3

[asdruweb]

Hola a todos!

He visto que con la propiedad “animation” y usando @keyframes se pueden crear animaciones con CSS3 pero no entiendo muy bien cómo funciona.

¿Alguna ayuda, tutorial, artículo?

[kseso?]

A ver si esto le sirve de inicio:
http://bit.ly/wc0Sap

[DanielRGB]

El tema de animar con CSS, es una de las cosas mas guapas que he visto que tiene el CSS, pero a su vez es también lo más incompatible entre navegadores....

Que usas formas redondas, degradados, sombras y demás en CSS... en los navegadores modernos se vera.

Pero en los antiguos no, pero aun así podrás acceder a la información, y ver incluso un estilo en la web.

Pero la animación con CSS, en los navegadores modernos se verá chulísimo y espectacular, pero en los navegadores antiguos... puede que no se vea nada, y la experiencia del usuario que visita tu web, será más nefasta que la operación de cirugía estética de Belen Estevan.

[rikimm]

Aprovechado el post que diferencia hay entre animar con css y jquery o cuales son las ventajas de cada uno

[minmax]

Lo primero que tienes que hacer es definir la animación en el objeto que quieras animar, por ejemplo una imagen:
img {
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

Después con @keyframes creas qué va a hacer la animación y le das un nombre. En este caso ir de una opacidad 1 a 0 y fadeOut
@keyframes
fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Por último tienes que definir cuándo o cómo se va a iniciar la animación. Podemos usar la propiedad hover por ejemplo
img:hover {
animation-name: fadeOut;
}

Puedes ver más información aquí sobre animaciones y también sobre transiciones:

http://blogs.msdn.com/b/esmsdn/archive/2012/02/09/a-241-adir-personalidad-a-las-p-225-ginas-web-con-transiciones-y-animaciones-de-css3.aspx