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?

Buenas, si efectivamente CSS3 ya viene con una especificación sencilla para imprimir animaciones a algún componente en el documento. En http://www.w3schools.com/css3/css3_animations.asp hay algunos ejemplos que tal vez te puedan servir.

Hay que tener en cuenta que tanto como Internet Explorer como Opera no soportan esta funcionalidad por lo que debes estar preparado para ello si quieres que tu pagina sea compatible con todos los navegadores y cualquier usuario pueda ver tus contenidos de la misma forma. Saludos

Internet explorer 10 tiene soporte para este tipo de animaciones ya que forma parte del estándar de HTML5.

Para hacer animaciones 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 en español 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

Hace poco vi una aplicación de pago que hace este tipo de cosas y otras mas, es como una especie de flash pero en puro CSS3.

Lo puedes encontrar aquí http://www.sencha.com/

No es económico pero si lo necesitas de verdad, valdrá la pena comprarlo :)

Tambien te recomiendo buscar info sobre CANVAS de HTML5 tambien da muy buenas opciones para jugar... aunque por el momento el tiempo que requiere es mejor usar Flash todavia... aunque obviamente hay que aprender nuevas cosas.