Crear animaciones con CSS3

[desastro]

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?

[inlain]

Lo primero que tienes que hacer es definir la animación en el objeto que quieras animar, por ejemplo una imagen:

Código [Seleccionar] Expandir

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

Código [Seleccionar] Expandir

@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

Código [Seleccionar] Expandir

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