internet-explorer - CSS3 动画在 IE 或 Opera 中不起作用

标签 internet-explorer browser css opera

我使用 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/

相关文章:

html - 在 FF 7 中查看 FF 3.6 - 可能吗?

css - 使用 Sass 将另一个元素类型添加到定义中§

javascript - 使用 Javascript 强制图像动态调整为容器/浏览器高度

javascript - 如何防止用户在 Jquery Mobile 中点击浏览器后退按钮时离开页面?

html - 有没有办法在 IE11 中查看 Shadow DOM?

internet-explorer - IE7 和 inline-block PLUS 使 li 扩展到子元素的大小

internet-explorer - 标记 <Meta http-equiv ="X-UA-Compatible"..> for Iframe 在 IE8 中不起作用

javascript - 如何让控制台在后台运行脚本?

javascript - PhotoSwipe 和 Masonry 导航箭头丢失

javascript - 表单重置后,js checkValidity() 不再正常运行