CSS3 动画在 IE 或 Opera 中不起作用答案

【问题标题】：CSS3 animations not working in IE or OperaCSS3 动画在 IE 或 Opera 中不起作用
【发布时间】：2014-05-06 20:28:32
【问题描述】：

我使用 webkit 属性和 CSS3 创建了一个简单的动画来旋转网站上的图像。

这里是样式 css（它只适用于 div）

.bg {
    position: relative;
    top: 0px;
    left: 0px;
    display:block;
    -webkit-animation: spin 100s infinite linear;
    -moz-animation: spin 100s infinite linear;
    -o-animation: spin 100s infinite linear;
    -ms-animation: spin 100s infinite linear;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    z-index:-1;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
  100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
  100% { -ms-transform: rotate(360deg);}
}

现在的结果是，在 Mozilla Firefox、Chrome 和 Safari 上，它可以正常工作，但在 Opera 和 Internet Explorer 中我看不到任何动画。

【问题讨论】：

标签： internet-explorer browser css opera

【解决方案1】：

http://caniuse.com/#feat=css-animation

IE10 和 Opera 12 支持 CSS 动画。不是更早。

【讨论】：

您好，我正在使用最新的 Opera 版本，根据测试下载
Opera 的最新稳定版本是 11.62，您需要全新构建版本 12 来测试动画（因为它们仅在 2 周前实施 - my.opera.com/desktopteam/blog/2012/03/26/html5-css-64bit）。警告：此版本非常不稳定。我猜你需要等一个月左右。
@AntonioColella 我刚刚使用了downloaded 和tested Opera 12，并且支持关键帧动画。
@AntonioColella 变换不是动画。转换是静态的：例如。元素旋转 90 度（没有动画）。另一方面，动画是动态的：元素平滑地移动到新状态。 developer.mozilla.org/en/CSS/transform 与 developer.mozilla.org/en/CSS/CSS_animations.
@ArthurYakovlev 您是否声明了@keyframes 和animation 的无前缀版本？如果没有，请声明并重试。

【解决方案2】：

也许这些信息对那些在 Opera 12 中遇到动画问题的人有用。

Opera 12.x css 动画属性“无限”对我不起作用。动画只播放一次然后停止。但是在我将持续时间的整数值（例如 1s）更改为小数值（例如 1.1s）后，动画开始无限播放。

【讨论】：