html - CSS3 动画在 IE10 中不起作用

这JSFiddle包含一个 CSS 动画，适用于 Chrome、Firefox 和 Safari，但不适用于 IE 10。它不会在 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/

最佳答案

在 IE10 中试用 Jsfiddle

http://jsfiddle.net/2V3Sx/

应该是@-webkit-keyframes moveclouds {

不是 @-webkit-keyframes "moveclouds"{...打字错误...:)

希望这能行得通

关于html - CSS3 动画在 IE10 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17849916/