Internet explorer css3 Swing动画在IE中不工作

Internet explorer css3 Swing动画在IE中不工作,internet-explorer,css,css-animations,Internet Explorer,Css,Css Animations,以下CSS3 swing动画在IE中不起作用 我能做些什么来让这一切顺利吗 .image{ -moz-animation: 3s ease 0s normal none infinite swing; -moz-transform-origin: 50% 36%; -webkit-animation:swing 3s infinite ease-in-out; -webkit-transform-origin: 50% 36%; } @-moz-keyframe

以下CSS3 swing动画在IE中不起作用

我能做些什么来让这一切顺利吗

.image{
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: 50% 36%;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin: 50% 36%;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

现场预览:什么版本的IE?版本10或更高版本支持CSS3动画。

编辑: 您还错过了非供应商特定声明

.image{
    animation: 3s ease 0s normal none infinite swing;
    transform-origin: 50% 36%;
}

@keyframes swing{
    0%{transform:rotate(-3deg)}
    50%{transform:rotate(3deg)}
    100%{transform:rotate(-3deg)}
}

请尝试此版本,并填写所有供应商前缀:

.image {
    -webkit-animation: 3s ease 0s normal none infinite swing;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -ms-animation: 3s ease 0s normal none infinite swing;
    -o-animation: 3s ease 0s normal none infinite swing;
    animation: 3s ease 0s normal none infinite swing;

    -webkit-transform-origin: 50% 36%;
    -moz-transform-origin: 50% 36%;
    -o-transform-origin: 50% 36%;
    -ms-transform-origin: 50% 36%;
    transform-origin: 50% 36%;
}

@keyframes swing {
 0% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
 }
 50% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
 }
 100% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
 }

}

@-moz-keyframes swing {
 0% {
   -moz-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }
 50% {
   -moz-transform: rotate(3deg);
   transform: rotate(3deg);
 }
 100% {
   -moz-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }

}

@-webkit-keyframes swing {
 0% {
   -webkit-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }
 50% {
   -webkit-transform: rotate(3deg);
   transform: rotate(3deg);
 }
 100% {
   -webkit-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }

}

@-ms-keyframes swing {
 0% {
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }
 50% {
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
 }
 100% {
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }

}

@-o-keyframes swing {
 0% {
   -o-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }
 50% {
   -o-transform: rotate(3deg);
   transform: rotate(3deg);
 }
 100% {
   -o-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }

}

也不管用。也许是IE无法识别的动画值?@Boris知道了-你不能引用关键帧标识符。使其
swing
,而不是
“swing”
。我已经更新了我的答案。在JSFIDLE中非常有效。但是当我在我的项目中添加了完全相同的代码时。它不起作用。拿一个例子来说,其他一些东西似乎会导致IE10在您的样式表上阻塞—这正是我在您的域上调试的困难之处。尝试从样式表中删除所有与动画无关的内容,直到它再次工作,然后缓慢地添加内容,直到找到破坏它的原因。我打赌这是因为div的宽度和高度设置为100%。在JSFIDLE中,宽度和高度是固定的,并且工作得非常完美。虽然我不能使用固定值,因为当您调整浏览器窗口的大小时,图像也会缩小。无论如何,非常感谢!:)