css3 Swing 动画在 IE 中不起作用答案

【问题标题】：css3 Swing animation not working in IEcss3 Swing 动画在 IE 中不起作用
【发布时间】：2013-12-09 00:42:40
【问题描述】：

以下 CSS3 摆动动画，在 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)}
}

实时预览：FIDDLE

【问题讨论】：

标签： internet-explorer css css-animations

【解决方案1】：

请试试这个版本，加上所有供应商前缀：

.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"。我已经更新了我的答案。
在 jsFiddle 中完美运行。但是当我将完全相同的代码添加到我的项目中时。它不起作用。 参加look。
其他东西似乎会导致 IE10 卡在您的样式表上——这正是我在您的域上调试的困难所在。尝试从样式表中删除与动画无关的所有内容，直到它再次起作用，然后慢慢添加内容，直到找出破坏它的原因。
我敢打赌这是因为 div 的宽度和高度设置为 100%。在 jsFiddle 中，宽度和高度是固定的，并且可以完美运行。虽然我不能使用固定值，因为当您调整浏览器窗口的大小时，图像也会缩小。无论如何，非常感谢！ :)

【解决方案2】：

什么版本的IE？版本 10 或更高版本支持 CSS3 动画。 http://caniuse.com/css-animation

编辑： 而且您错过了非供应商特定声明

.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)}
}

【讨论】：