CSS 动画在 Firefox 和 IE 上不起作用答案

【问题标题】：CSS animation does not work on Firefox and IECSS 动画在 Firefox 和 IE 上不起作用
【发布时间】：2014-02-28 01:40:45
【问题描述】：

我让这段代码在 Chrome 和 Safari 上完美运行，但它在 FF 和 IE 上不起作用，我试图解决这个问题几个小时但仍然没有线索。

@-moz-keyframes imageAnimation { 
0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
}
8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
}
17% {
    opacity: 1;
    -moz-transform: scale(1.1) rotate(3deg);
}
25% {
    opacity: 0;
    -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }

} Here is the full code

【问题讨论】：

我们应该看到什么样的动画？在 Chrome 和 Mozilla 中，小提琴对我来说看起来相当静态。此外，并非所有以供应商为前缀的 css 都是相同的。例如，-webkit-keyframes 以 opacity:1 开头，-moz-keyframes 以 opacity:0 开头。顺便说一句，你真的不应该把所有的 HTML 和 CSS 放在 CSS 框中。

标签： php html css firefox animation

【解决方案1】：

我看到了你制作的 CSS。如果你正在使用

@-o-keyframes imageAnimation

改变你的

-webkit-animation-timing-function

到

-o-animation-timing-function

注意前缀。对您制作的其他关键帧执行相同操作。

请检查http://caniuse.com/css-animation 以了解浏览器兼容性。另请查看CSS Keyframe animations for all browsers? 以获得更好和更简单的语法。

【讨论】：