NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Animaciones CSS3

29 de Enero del 2013 por Josep Antoni Bover10093 visitas, 13 comentarios, 31 votos con una media de 3.58 sobre 5.
Categorías : CSS, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Animaciones CSS3

Desde hace algún tiempo que he empezado a añadirle poco a poco varias animaciones en CSS3 a mi web. Y al ver que últimamente recibo mensajes sobre ellas, he creído conveniente crear este articulo para enseñaros un poco por dentro dichas animaciones.

Supongo que los usuarios de Chrome, Firefox, y safari os habréis fijado en la animación de las fotos de las entradas aleatorias (que parten desde arriba del documento, y caen hasta su posición por defecto con un pequeño efecto muelle), o en la animación del contenido al cargar / salir de la pagina (que hace una rotación del contenido).

Pues ahora podréis ver con más detalle como funcionan estas animaciones.

Antes de nada deberíais conocer un poco por encima las propiedades animation del CSS3 : @keyframes, animation, animation-delay, animation-direction, animation-duration, animation-name, animation-iteration-count, animation-play-state, animation-timing-function.

Los enlaces anteriores corresponden a la Referéncia de propiedades CSS que hace algún tiempo que estoy preparando pero aun está incompleta.

Rotación del contenido

Vamos a empezar por la animación menos complicada, que sería la de rotar el contenido. La idea es que imaginemos el contenido como una hoja de papel que estamos mirando por su parte lateral fina, y que la vamos girando hasta quedar plana.

Partiendo de que tenemos un div con la id #Contenido que teóricamente está lleno de texto e imágenes, por ejemplo este articulo, necesitamos definir la animación para él :

Rotación del contenido
1
2
3
4
5
6
7
#Contenido {
-webkit-animation:KFRotacion3D 1s linear; /* Chrome y Safari */
-moz-animation:KFRotacion3D 1s linear; /* Firefox */
-ms-animation:KFRotacion3D 1s linear; /* IE 10 */
-o-animation:KFRotacion3D 1s linear; /* Opera */
animation:KFRotacion3D 1s linear; /* Todos en un futuro */
}

Con este código estamos indicando que el #Contenido usara una animación linear durante 1 segundo con los keyframes definidos en KFRotacion3D.

Fijaros que he definido la misma propiedad 5 veces con prefijos distintos (uno para cada navegador actual)

Ahora veamos como habría que definir la línea de tiempo para la animación (keyframes) :

Línea de tiempo para la animación
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@-webkit-keyframes KFRotacion3D { /* Chrome y Safari */
0% { opacity:0.0; -webkit-transform:rotateY(90deg) rotateZ(2deg); }
100% { opacity:1.0; -webkit-transform:rotateY(0deg) rotateZ(0deg); }
}
@-moz-keyframes KFRotacion3D { /* Firefox */
0% { opacity:0.0; -moz-transform:rotateY(90deg) rotateZ(2deg); }
100% { opacity:1.0; -moz-transform:rotateY(0deg) rotateZ(0deg); }
}
@-ms-keyframes KFRotacion3D { /* IE 10 */
0% { opacity:0.0; -ms-transform:rotateY(90deg) rotateZ(2deg); }
100% { opacity:1.0; -ms-transform:rotateY(0deg) rotateZ(0deg); }
}
@-o-keyframes KFRotacion3D { /* Opera */
0% { opacity:0.0; -o-transform:rotateY(90deg) rotateZ(2deg); }
100% { opacity:1.0; -o-transform:rotateY(0deg) rotateZ(0deg); }
}
@keyframes KFRotacion3D { /* Todos en un futuro */
0% { opacity:0.0; transform:rotateY(90deg) rotateZ(2deg); }
100% { opacity:1.0; transform:rotateY(0deg) rotateZ(0deg); }
}

Fijaros que se define una línea con 0% (inicio) y otra con 100% (final), es decir que la animación empieza con opacidad 0 y una rotación de 90 grados a la Y, y termina con una opacidad de 1 y una rotación de 0 grados a la Y.

Dentro de un keyframe podemos definir tantos pasos como queramos, por ejemplo podríamos empezar a hacer la rotación a partir del 75% de la animación, para ello bastaría con añadir otra línea con el 75% y las propiedades que queremos animar.

Al principio puede que os suene todo a chino, pero la verdad es que es muy fácil hacer animaciones con este sistema.

Objetos que caen desde arriba del navegador

Esta animación es la que se ven las imágenes de las entradas aleatorias cayendo desde arriba del navegador. La idea es que caiga la imagen desde arriba, y una vez llega al suelo (su posición Y 0) se comprima la altura como si fuera un muelle, y finalmente se restablezca su altura original.

Objeto cayendo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.Animacion {
width:155px; /* Ancho */
height:125px; /* Altura */
position:relative; /* Posición relativa (permite mover el objeto) */
background-color:#FFF; /* Fondo blanco */
border:solid 1px #333; /* Borde de 1 pixel negro */
float:left; /* Alineado hacia la izquierda */
margin-left:20px; /* Margen de 20 pixeles a la izquierda */
-webkit-animation:CajaCayendo 1s linear; /* Animación para Chrome y Safari */
-moz-animation:CajaCayendo 1s linear; /* Animación para FireFox */
-ms-animation:CajaCayendo 1s linear; /* Animación para IE 10 */
-o-animation:CajaCayendo 1s linear; /* Animación para Opera */
animation:CajaCayendo 1s linear; /* Animación para navegadores modernos (en un futuro) */
}

Los objetos Animacion en este caso tienen un tamaño fijo de 155x125, la posición relativa (de esta forma podemos modificarla), el fondo blanco con un borde gris, se alinean a la derecha, y tienen un margen a la derecha de 20 pixeles. La animación durara un segundo (realmente no durara un segundo, pero necesitamos un valor inicial), será lineal y usara los keyframes CajaCayendo.

Veamos la línea del tiempo CajaCayendo :

Línea de tiempo para la animación
1
2
3
4
5
6
@-webkit-keyframes CajaCayendo {
0% { top:-600px; }
75% { top:0px; -webkit-transform: scale(1, 1); }
90% { top:15px; -webkit-transform: scale(1, 0.8); }
100% { top:0px; -webkit-transform: scale(1, 1); }
}

En esta ocasión ya utilizamos 4 porcentajes de tiempo, al principio la altura es de -600 pixeles, cuando la animación llega al 75% el objeto toca el suelo, al 90% comprimimos la altura del objeto a una escala de 0.8 y rebajamos la 'Y' inicial 15 pixeles (para que el objeto siga tocando el suelo, al haber rebajado la altura un 0.8% el objeto mide unos 15 pixeles menos, que son los que sumamos a la Y), y finalmente al llegar al 100% volvemos a poner la Y a 0 y restauramos la proporción original de la altura.

En este ejemplo no he incluido el código para FireFox, IE10, Opera, y la propiedad final, ya que me pareció innecesario ocupar media web con lo mismo, pero siguen siendo necesarios si queremos que la animación sea compatible con todos los navegadores.

Ahora nos falta por ver como gestionamos la duración de la animación. Al utilizar varios objetos (en este caso 6) lo ideal es que los objetos no caigan todos al mismo tiempo, para ello vamos a crear 6 clases cada una con una duración distinta :

Duraciones para los 6 objetos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Varias duraciones distintas para la animación del banner */
.Duracion1 { -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s;
-ms-animation-duration:0.5s; -o-animation-duration:0.5s; animation-duration:0.5s; }
.Duracion2 { -webkit-animation-duration:0.4s; -moz-animation-duration:0.4s;
-ms-animation-duration:0.4s; -o-animation-duration:0.4s; animation-duration:0.4s; }
.Duracion3 { -webkit-animation-duration:0.45s; -moz-animation-duration:0.45s;
-ms-animation-duration:0.45s; -o-animation-duration:0.45s; animation-duration:0.45s; }
.Duracion4 { -webkit-animation-duration:0.3s; -moz-animation-duration:0.3s;
-ms-animation-duration:0.3s; -o-animation-duration:0.3s; animation-duration:0.3s; }
.Duracion5 { -webkit-animation-duration:0.55s; -moz-animation-duration:0.55s;
-ms-animation-duration:0.55s; -o-animation-duration:0.55s; animation-duration:0.55s; }
.Duracion6 { -webkit-animation-duration:0.375s; -moz-animation-duration:0.375s;
-ms-animation-duration:0.375s; -o-animation-duration:0.375s; animation-duration:0.375s; }

Fijaros que cada clase Duracion tiene un tiempo distinto para la animación, de esta forma conseguimos un efecto un poco mas alborotado. Además si creamos los objetos con php podemos mezclar las duraciones de forma que la animación nunca parece exactamente igual.

Y con esto terminamos por hoy, espero que os sirva de ayuda!.


[#22] Hector 14 Julio del 2015 a las 1:57, votos 0 de 0.
Felicitaciones amigo eres un Genio y muchas gracias por compartirlo
[#21] devildrey33 26 Septiembre del 2013 a las 21:20, votos 6 de 9.
20 Te he creado un ejemplo en http://devildrey33.es/Lab/Ejemplos/Diapositivas/Diapositivas.html

Lo he hecho con JQuery ya que para temas de compatibilidad va muy bien utilizar algún framework, o luego programas las cosas en javascript y tienes que hacer retoques para cada navegador.

Hay un bug con el laboratorio y los temporizadores, de forma de que cada vez que modificas el código se crea un nuevo temporizador sin eliminar el antiguo, lo digo porque si editas mucho el código, veras que las imágenes se vuelven locas y cambian aleatoria mente. Te dejo el enlace del ejemplo sin el laboratorio para que veas que funciona tal y como debería cuando no está dentro de un iframe que se va recargando http://devildrey33.es/Ejemplos/Diapositivas/Diapositivas.html

Saludos.
[#20] Fonsoesp 26 Septiembre del 2013 a las 18:04, votos 1 de 1.
19 Estaría MUY interesado en implementar una transición de imágenes compatible con todos los navegadores, es decir JavaScript. Ahora mismo estaba leyendo un documento de msdn de microsoft para utilizar una de sus librerías sliderShow.js; aunque no quisiera caer en la trampa de las plantillas y de las herramientas ya hechas, puesto que siempre pasa que necesitas ampliar cualquier cosa para adecuarla a tu web y es más tedioso modificar algo ya hecho, que hacerlo tú mismo desde 0.
No obstante, si supiera por dónde empezar, te lo agradecería.

Un saludo ;-)
[#19] devildrey33 25 Septiembre del 2013 a las 17:28, votos 0 de 0.
17Veo has encontrado una limitación de los keyframes/animation del firefox y del explorer. Por lo que he visto en tu web con Chrome simplemente cambias el background-image, y el chrome te monta una transición con opacidad incluida (o no he encontrado como haces para que al cambiar de imagen se fusionen usando los canales alpha).

Por lo tanto al cambiar el background-image en el keyframes, el chrome entiende que tiene que hacer una transición de una imagen a la otra (hacer transparente la imagen actual, y hacer opaca la nueva imagen a la vez), en cambio tanto el firefox, como el explorer ignoran el background-image dentro del keyframes (imagino que aun no esta implementado, o bien que los de google se han adelantado y han hecho este efecto pendiente de aprobación por la W3C, que no sería la primera vez.

Sinceramente no había probado nunca de cambiar una imagen dentro del keyframes de esta forma, ya que en mi cabeza resulta un poco inverosímil, y viendo lo que hace el chrome, no me extraña que en otros navegadores no este implementado. Por ejemplo como le dices al chrome que quieres cambiar la imagen a saco sin transición? o hacer otro tipo de efecto?. Al hacer esto el chrome realmente está restando versatilidad a la animación, ya que no podemos indicar el efecto que debe hacer, y por ello me imagino que es mas una idea de los de google / webkit (en opera con webkit también funciona tu animación).

Si lo que quieres es que funcione en todos los navegadores yo casi que lo programaría con JQuery / JavaScript.

Si necesitas ayuda para hacerte la misma animación en JQuery o en JavaScript házmelo saber y te miro de hacer un ejemplo en el laboratorio.

Saludos!
[#17] Fonsoesp 25 Septiembre del 2013 a las 14:24, votos 0 de 0.
16 Buenas devildrey.
Simplemente y por si a alguien le puede interesar... Por más que he buscado solución, no soy capaz de entender el funcionamiento de los keyframes en FireFox. He tratado animations no solo con texto sino con imágenes y funciona todo perfectamente lo relativo a mover imágenes y demás; no obstante me topo con el problema de la propiedad background de un div dentro del -moz-keyframes. Si no, me podrías hacer el favor de comprobarlo tú mismo... Realmente no es nada complicado lo que quiero hacer... Una animación sobre un DIV de iteration-count:infinite; donde en los diferentes tantos por ciento del keyframes{0%... 50%... 100%...} haya propiedades background o background-image:url('...'); que cambien.
Con Chrome queda un slider guapísimo con transiciones entre fotografías MUY "limpias"; pero en FireFox... imposible!!
[#16] devildrey33 24 Septiembre del 2013 a las 20:01, votos 0 de 0.
15 Veamos lo de cargar imágenes en los keyframes... no me acaba de convencer.. y no se yo si realmente está previsto en la w3c. Una posible solución a ello seria hacer una imagen enorme con todas las imágenes que quieres usar, y utilizar la propiedad background-position. De esta forma se cargara la imagen nada mas empezar, y para cambiar de foto únicamente deberás asignar la posición de esta.

Sobre el mensajito que aparece de abandonar la pagina, es muy extraño pero hace tiempo funcionaba perfectamente en firefox, y ahora veo que falla.

Por ultimo lo del chrome en mac, no te puedo decir gran cosa.. 

Espero que te sirva de ayuda, Saludos!
[#15] Fonsoesp 24 Septiembre del 2013 a las 19:39, votos 0 de 0.
14 Estoy como loco con Firefox de los coj..nes.
Tengo MAC y WINDOWS, y en ambos me pasa lo mismo, hay determinadas animaciones que funcionan sin problema (por lo que he probado, las relacionadas con texto). En cuanto me meto a hacer animaciones a las imágenes (el caso es de un DIV llamado bannerFotos, en el cual en el 0% cargo un fondo background-image:url('...'), en el 33% otra foto hasta el 100% que cargo la primera que he puesto). La web es de mi boda, y francamente, modestia a parte, queda GENIAL en Chrome. Me voy al navegador Firefox y no se carga NINGUNA fotografía. ¡¡Estoy que echo humo!!! (por supuesto -webkit-animation y @-webkit-keyframes para Chrome y -moz- para FireFox).

En respuesta a tu comentario de la web, estoy navegando ahora con Chrome por ella y SIN PROBLEMA!!!; no obstante, con FireFox me sigue dando problema a la hora de pasar de una noticia a otra. Utilizo la versión 24.0 de FireFox para MAC.

A propósito... Y quizás como OffTopic... En Chrome para MAC sabes cómo se puede actualizar la página desechando el caché?? Cada vez que hago cualquier modificación en la página, para actualizar y que se vean los cambios tengo que vaciar el caché. En Windows lo hacía con Ctrol+F5 (aquí ando perdido con ese tipo de detalles).
GRACIAS
[#14] devildrey33 24 Septiembre del 2013 a las 16:12, votos 0 de 0.
13 Buenas Fonsoesp, muchas gracias por tu comentario. En lo referente a las animaciones de mi laboratorio, es posible que las que no funcionan simplemente ni lleven el -moz-, y esto es por que a la hora de crearlas las pruebo siempre con Chrome, pero en principio si se usa el prefijo -moz- deberían funcionar correctamente en Firefox.

De hecho vi un script no hace mucho que ahorra el tener que insertar los prefijos -moz-, -webkit-, etc.. http://leaverou.github.io/prefixfree/

Contestando a una sugerencia que he recibido también a la misma hora :
Lo único que veo que podrías mejorar en tu web, es dejar a un lado
la pregunta de ¿seguro que desea salir de la página? cada vez que se
navega incluso en tu misma web.
Esto solo sucede con Internet Explorer, y si que es cierto que lo tengo que solucionar (Si pudiera eliminar el Internet Explorer de la web seria genial, pero como no puedo... me toca programar secciones especificas solo para él, y a veces me da palo para ser francos.).

Re-editado : Acabo de probar el explorer 10, y parece que el evento before unload funciona bien... en que navegador te pasa??

Espero que os sirva de ayuda, Saludos.
[#13] Fonsoesp 24 Septiembre del 2013 a las 13:52, votos 1 de 1.
Buenas, lo primero felicitarte. Acabo de descubrir la web a través de una consulta de animaciones en css y es COJONUDA (Gracias por toda la ayuda).
Yendo al tema, ... estoy desquiciado peleándome con las animaciones para verlas en el Firefox. Chrome va de lujo con -webkit-, pero Firefox NO va con -moz- (o mejor dicho, ... va lo que quiere...).
En tu laboratorio, hay animaciones que funcionan sin problema y otras que no van. Hay alguna solución a ello???

Un saludo, y de nuevo gracias por todo.
[#12] edy 18 Septiembre del 2013 a las 5:57, votos 2 de 2.
muy bueno 100 puntos    
[#11] kakaroto 28 Junio del 2013 a las 17:25, votos 3 de 4.
Gracias hermanos ... sos la ley
[#10] Daniel Banegas 03 Junio del 2013 a las 22:59, votos 1 de 2.
Excelente, me sirvio mucho
[#1] Pep 09 Marzo del 2013 a las 2:04, votos 20 de 22.
Muy currado gracias.