Question

我创建了一个简单的动画，使用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中我看不到任何动画。

Answer 1

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

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

Answer 2

也许这些信息对于在Opera 12中出现动画问题的人来说非常有用。

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

CSS3动画无法在IE或Opera中运行

2 个答案: