2

我使用 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 中我看不到任何动画。

4

2 回答 2

6

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

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

于 2012-04-07T12:54:16.783 回答
0

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

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

于 2014-05-06T12:28:32.040 回答