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?
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 (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)