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

Question

我已将此代码完美地在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 }

这是完整的代码

Answer 1

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

@-o-keyframes imageAnimation

改变你的

-webkit-animation-timing-function

至

-o-animation-timing-function

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

请检查http://caniuse.com/css-animation是否具有浏览器兼容性。 还要检查所有浏览器的CSS关键帧动画吗？ 获得更好，更简单的语法。