Crear animaciones con CSS3
- Iniciador del tema almor
- Fecha de inicio
Buenas, si efectivamente CSS3 ya viene con una especificación sencilla para imprimir animaciones a algún componente en el documento. En http://www.w3schools.com/css3/css3_animations.asp hay algunos ejemplos que tal vez te puedan servir.
Hay que tener en cuenta que tanto como Internet Explorer como Opera no soportan esta funcionalidad por lo que debes estar preparado para ello si quieres que tu pagina sea compatible con todos los navegadores y cualquier usuario pueda ver tus contenidos de la misma forma. Saludos
Hay que tener en cuenta que tanto como Internet Explorer como Opera no soportan esta funcionalidad por lo que debes estar preparado para ello si quieres que tu pagina sea compatible con todos los navegadores y cualquier usuario pueda ver tus contenidos de la misma forma. Saludos
Internet explorer 10 tiene soporte para este tipo de animaciones ya que forma parte del estándar de HTML5.
Para hacer animaciones lo primero que tienes que hacer es definir la animación en el objeto que quieras animar, por ejemplo una imagen:
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
Por último tienes que definir cuándo o cómo se va a iniciar la animación. Podemos usar la propiedad hover por ejemplo
Puedes ver más información en español aquí sobre animaciones y también sobre transiciones:
http://blogs.msdn.com/b/esmsdn/arch...b-con-transiciones-y-animaciones-de-css3.aspx
Para hacer animaciones 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;
}
Código:
@keyframes
fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Código:
img:hover {
animation-name: fadeOut;
}http://blogs.msdn.com/b/esmsdn/arch...b-con-transiciones-y-animaciones-de-css3.aspx
Hace poco vi una aplicación de pago que hace este tipo de cosas y otras mas, es como una especie de flash pero en puro CSS3.
Lo puedes encontrar aquí http://www.sencha.com/
No es económico pero si lo necesitas de verdad, valdrá la pena comprarlo
Lo puedes encontrar aquí http://www.sencha.com/
No es económico pero si lo necesitas de verdad, valdrá la pena comprarlo
P
pasrau2
Guest
Tambien te recomiendo buscar info sobre CANVAS de HTML5 tambien da muy buenas opciones para jugar... aunque por el momento el tiempo que requiere es mejor usar Flash todavia... aunque obviamente hay que aprender nuevas cosas.
