CSS - Crear animaciones con CSS3

   
Vista:

Crear animaciones con CSS3

Publicado por Ramon (1 intervención) el 11/03/2012 21:13:28
Hola,

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?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Crear animaciones con CSS3

Publicado por urtasum (1 intervención) el 25/03/2012 17:28:18
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar