2013-07-25 146 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

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