Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Crear animaciones con CSS3

CSS - Crear animaciones con CSS3

Volver
Nuevo Tema
<<>>
 
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:
1
2
3
4
5
6
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
1
2
3
4
5
6
7
8
9
@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
1
2
3
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