2013-07-25 106 views
2

JSFiddle这个JSFiddle包含一个CSS动画,适用于Chrome,Firefox和Safari,但不适用于IE 10.它不会在IE10中启动动画 - 在这里看不到任何错误?CSS3动画在IE10中不起作用

.x1 { 
      left: 200px; 
      top: -150px; 

     -webkit-transform: scale(0.8); 
     -moz-transform: scale(0.8); 
     -o-transform: scale(0.8); 
     -ms-transform: scale(0.8); 
      transform: scale(0.8); 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
      filter: alpha(opacity=80); 
      opacity: 0.8; 

     -webkit-animation: moveclouds 47s linear infinite; 
     -moz-animation: moveclouds 47s linear infinite; 
     -ms-animation: moveclouds 47s linear infinite; 
     -o-animation: moveclouds 47s linear infinite; 
      animation: moveclouds 47s linear infinite; 
     } 


     @keyframes "moveclouds" { 
      0% { 
       margin-left: 1000px; 
      } 
     100% { 
      margin-left: -1000px; 
      } 
     } 

     @-moz-keyframes moveclouds { 
     0% { 
      margin-left: 1000px; 
      } 
     100% { 
      margin-left: -1000px; 
      } 
     } 

     @-webkit-keyframes "moveclouds" { 
     0% { 
      margin-left: 1000px; 
      } 
     100% { 
      margin-left: -1000px; 
      } 
     } 

     @-ms-keyframes "moveclouds" { 
     0% { 
      margin-left: 1000px; 
      } 
     100% { 
      margin-left: -1000px; 
      } 
     } 

    @-o-keyframes "moveclouds" { 
     0% { 
      margin-left: 1000px; 
      } 
    100% { 
      margin-left: -1000px; 
      } 
     } 

这里的链接的jsfiddle http://jsfiddle.net/zXTSp/1/

回答

1

尝试的jsfiddle在IE10

http://jsfiddle.net/2V3Sx/

应该@-webkit-keyframes moveclouds {

@-webkit-keyframes "moveclouds" { ......一个错字... :)

希望这个作品

+0

谢谢!!完美运作。 – user1437251

+0

好的......... :) :) –