[SOLUCIONADO] Animación CSS3 en Internet Explorer 10

src · #1 (**permalink**) 07/07/2013, 11:12

Tengo una animación muy sencilla que funciona perfectamente en google chrome pero no en internet explorer 10. El código es el siguiente. Ojalá me puedan ayudar. De antemano, gracias.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:200px;
height:200px;
background-image:url(uno.jpg);
animation:cambia 40s;
-webkit-animation:cambia 40s;
}
 
@keyframes cambia
{
0%   {background-image:url(uno.jpg);}
25%  {background-image:url(dos.jpg);}
50%  {background-image:url(tres.jpg);}
75%  {background-image:url(cuatro.jpg);}
100% {background-image:url(uno.jpg);}
}
 
@-webkit-keyframes cambia
{
0%   {background-image:url(uno.jpg);}
25%  {background-image:url(dos.jpg);}
50%  {background-image:url(tres.jpg);}
75%  {background-image:url(cuatro.jpg);}
100% {background-image:url(uno.jpg);}
}
 
</style>
</head>
<body>
 
<div></div>
 
</body>
</html>

pzin · #2 (**permalink**) 07/07/2013, 11:59

Bienvenido al foro.

En principio las animaciones funcionan en IE10. Lamentablemente, no tengo IE instalado.

Intenta hacer una prueba reducida para IE, algo así:

Código CSS:

Ver originaldiv {
  width: 200px;
  height: 200px;
  animation: cambia 4s;
}
 
@keyframes cambia {
  from {
    color: red;
  }
  to {
    color: blue;
  }
}

Con algo de texto en ese div. Y a partir de ahí lo vas complicando poco a poco hasta llegar a lo que tienes. Así podrás comprobar en qué punto ocurre el fallo.

Cuando publiques código, intenta usar code o highlight.

src · #3 (**permalink**) 07/07/2013, 12:57

Gracias por tu comentario, ya lo he intentado; si en lugar de utilizar imágenes para el background hago solo transiciones de colores (background:red) funciona perfectamente. El problema inicia cuando quiero que haga la transición con imágenes.

Rafael · #4 (**permalink**) 08/07/2013, 00:13

No hay transiciones entre imágenes, lo que se puede hacer es poner objetos uno sobre otro y animar la opacidad.

src · #5 (**permalink**) 08/07/2013, 10:03

Gracias a Pzin y a Rafael por tomarse el tiempo para ayudarme. Seguiré el consejo de Rafael.

sonickseven · #6 (**permalink**) 08/07/2013, 11:13

olle por cierto creo que para windows sw utiliza el prefijo -ms- !! si quieres que funcione

pzin · #7 (**permalink**) 08/07/2013, 11:23

Cita:

Iniciado por sonickseven

olle por cierto creo que para windows sw utiliza el prefijo -ms- !! si quieres que funcione

No. IE10 soporta la forma de la W3C, e IE9 e inferiores directamente no tienen soporte.

src · #8 (**permalink**) 11/07/2013, 17:45

Siguiendo el consejo de Rafael, la animación la llevé a cabo controlando la opacidad de las imágenes. Les dejo el código que funciona en IE10, para que funcione en el resto de los navegadores solo hay que agregar los prefijos correspondientes (-webkit-, -moz-, etc). Espero que le sea de utilidad a alguien más. Gracias a todos por su ayuda.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style>
body{
background: #CFF;
}
#imagen { 
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
opacity:0;
}
 
#imagen.anim_1 {
   animation: ciclo_1 50s linear infinite;      
}
#imagen.anim_2 {
   animation: ciclo_2 50s linear infinite;      
}
#imagen.anim_3 {
   animation: ciclo_3 50s linear infinite;      
}
#imagen.anim_4 {
   animation: ciclo_4 50s linear infinite;      
}
#imagen.anim_5 {
   animation: ciclo_5 50s linear infinite;      
}
@keyframes ciclo_1 {
   0%  { opacity:0; }
   5%  { opacity:1; }
   20% { opacity:1; }
   25% { opacity:0; }
  100% { opacity:0; }
}
@keyframes ciclo_2 {
   0%  { opacity: 0; }
   20% { opacity: 0; }
   25% { opacity: 1; }
   40% { opacity: 1; }
   45% { opacity: 0; }
   100%{ opacity: 0; }
}
@keyframes ciclo_3 {
   0%  { opacity: 0; }
   40% { opacity: 0; }
   45% { opacity: 1; }
   60% { opacity: 1; } 
   65% { opacity: 0; } 
   100%{ opacity: 0; }
}
@keyframes ciclo_4 {
   0%  { opacity: 0; }
   60% { opacity: 0; }
   65% { opacity: 1; }
   80% { opacity: 1; }
   85% { opacity: 0; }
   100%{ opacity: 0; }
}
@keyframes ciclo_5 {
   0%  { opacity: 0; }
   80% { opacity: 0; }
   85% { opacity: 1; }
   95% { opacity: 1; }
   100%{ opacity: 0; }
}
 
</style>
</head>
<body>
    <img id="imagen" class="anim_1" src="uno.jpg">
    <img id="imagen" class="anim_2" src="dos.jpg">
    <img id="imagen" class="anim_3" src="tres.jpg">
    <img id="imagen" class="anim_4" src="cuatro.jpg">
    <img id="imagen" class="anim_5" src="cinco.jpg">
</body>
</html>

pzin · #9 (**permalink**) 11/07/2013, 18:19

Gracias por compartirlo.

Si quieres tener algo más limpio (DRY), podrías usar la misma animación, la misma declaración keyframes, e indicar en cada animación un animation-delay:

Código CSS:

Ver original#imagen.anim_1 {
   animation: ciclo 10s linear infinite;      
}
#imagen.anim_2 {
   animation: ciclo 10s linear infinite 10s;
}
#imagen.anim_3 {
   animation: ciclo 10s linear infinite 20s;
}
#imagen.anim_4 {
   animation: ciclo 10s linear infinite 30s;
}
#imagen.anim_5 {
   animation: ciclo 10s linear infinite 40s;
}
 
@keyframes ciclo {
   0%  { opacity: 0; }
   20% { opacity: 1; }
   80% { opacity: 1; }
  100% { opacity: 0; }
}

src · #10 (**permalink**) 12/07/2013, 10:29

Gracias Pzin, la modificación que me propones funciona bien solo en la primer iteración del ciclo completo. A partir de la segunda iteración las cinco imágenes cambian de opacidad 0 a 1 y viceversa al mismo tiempo y solo permanece visible la imagen cinco (cinco.jpg). Esto se debe a que el animation-delay retrasa el inicio de la animación solo para la primera iteración, a partir de ese punto todas las animaciones se ejecutan al mismo tiempo.
En el código que publiqué controlo manualmente el momento de inicio de la animación para cada una de las imágenes al indicar en los puntos porcentuales el momento de cambiar la opacidad para cada imagen.

pzin · #11 (**permalink**) 12/07/2013, 11:01

Cita:

Iniciado por src

Esto se debe a que el animation-delay retrasa el inicio de la animación solo para la primera iteración, a partir de ese punto todas las animaciones se ejecutan al mismo tiempo.

No, animation-delay retrasa el inicio de la animación, luego los ciclos son iguales, pero siempre con ese retraso. Aquí un ejemplo: http://codepen.io/anon/pen/nKsxt

Se puede hacer con la misma declaración de keyframes lo que quieres hacer, lo único que hay que pensar un poco para justarlo.

src · #12 (**permalink**) 13/07/2013, 10:39

Nuevamente gracias pzin por tomarte el tiempo para corregir mis errores y ayudarme a aprender. Aquí dejo el código más limpio, tal y como me sugeriste.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style>
body{
background: #CFF;
}
#imagen { 
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
opacity:0;
}
 
#imagen.anim_1 {
   animation: ciclo 50s linear infinite;        
}
#imagen.anim_2 {
   animation: ciclo 50s linear infinite 10s;
}
#imagen.anim_3 {
   animation: ciclo 50s linear infinite 20s;
}
#imagen.anim_4 {
   animation: ciclo 50s linear infinite 30s;
}
#imagen.anim_5 {
   animation: ciclo 50s linear infinite 40s;
}
@keyframes ciclo {
   0%  { opacity:0; }
   5%  { opacity:1; }
   20% { opacity:1; }
   25% { opacity:0; }
  100% { opacity:0; }
}
 
</style>
</head>
<body>
    <img id="imagen" class="anim_1" src="uno.jpg">
    <img id="imagen" class="anim_2" src="dos.jpg">
    <img id="imagen" class="anim_3" src="tres.jpg">
    <img id="imagen" class="anim_4" src="cuatro.jpg">
    <img id="imagen" class="anim_5" src="cinco.jpg">
</body>
</html>