Imprimir Página - Crear animaciones con CSS3

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

Código:

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:

@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:

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)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: desastro en 11 Marzo 2012, 21:17 pm