我使用 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 中,我看不到任何动画。
最佳答案
http://caniuse.com/#feat=css-animation
IE10 和 Opera 12 支持 CSS 动画。不早了。
关于internet-explorer - CSS3 动画在 IE 或 Opera 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10054635/