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
Autor
En línea
