Tema: Animación CSS3 en Internet Explorer 10
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 11/07/2013, 17:45
src
 
Fecha de Ingreso: julio-2013
Mensajes: 11
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: animacion css3 en internet explorer 10
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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body{
  6. background: #CFF;
  7. }
  8. #imagen { 
  9. width: 200px;
  10. height: 200px;
  11. position: absolute;
  12. top: 0px;
  13. left: 0px;
  14. opacity:0;
  15. }
  16.  
  17. #imagen.anim_1 {
  18.    animation: ciclo_1 50s linear infinite;      
  19. }
  20. #imagen.anim_2 {
  21.    animation: ciclo_2 50s linear infinite;      
  22. }
  23. #imagen.anim_3 {
  24.    animation: ciclo_3 50s linear infinite;      
  25. }
  26. #imagen.anim_4 {
  27.    animation: ciclo_4 50s linear infinite;      
  28. }
  29. #imagen.anim_5 {
  30.    animation: ciclo_5 50s linear infinite;      
  31. }
  32. @keyframes ciclo_1 {
  33.    0%  { opacity:0; }
  34.    5%  { opacity:1; }
  35.    20% { opacity:1; }
  36.    25% { opacity:0; }
  37.   100% { opacity:0; }
  38. }
  39. @keyframes ciclo_2 {
  40.    0%  { opacity: 0; }
  41.    20% { opacity: 0; }
  42.    25% { opacity: 1; }
  43.    40% { opacity: 1; }
  44.    45% { opacity: 0; }
  45.    100%{ opacity: 0; }
  46. }
  47. @keyframes ciclo_3 {
  48.    0%  { opacity: 0; }
  49.    40% { opacity: 0; }
  50.    45% { opacity: 1; }
  51.    60% { opacity: 1; } 
  52.    65% { opacity: 0; } 
  53.    100%{ opacity: 0; }
  54. }
  55. @keyframes ciclo_4 {
  56.    0%  { opacity: 0; }
  57.    60% { opacity: 0; }
  58.    65% { opacity: 1; }
  59.    80% { opacity: 1; }
  60.    85% { opacity: 0; }
  61.    100%{ opacity: 0; }
  62. }
  63. @keyframes ciclo_5 {
  64.    0%  { opacity: 0; }
  65.    80% { opacity: 0; }
  66.    85% { opacity: 1; }
  67.    95% { opacity: 1; }
  68.    100%{ opacity: 0; }
  69. }
  70.  
  71. </style>
  72. </head>
  73. <body>
  74.     <img id="imagen" class="anim_1" src="uno.jpg">
  75.     <img id="imagen" class="anim_2" src="dos.jpg">
  76.     <img id="imagen" class="anim_3" src="tres.jpg">
  77.     <img id="imagen" class="anim_4" src="cuatro.jpg">
  78.     <img id="imagen" class="anim_5" src="cinco.jpg">
  79. </body>
  80. </html>