在Firefox CSS3关键帧动画不能正常工作

我有以下CSS3规则在Firefox CSS3关键帧动画不能正常工作

#sun, #sun div { 
    position:absolute; 
    border-radius:1000px; 
    -webkit-border-radius:1000px; 
    -moz-border-radius:1000px; 
    -ms-border-radius:1000px; 
    -o-border-radius:1000px; 
    animation:sunrise 3.2s ease 0 infinite alternate; 
    -webkit-animation:sunrise 3.2s ease 0 infinite alternate; 
    -moz-animation:sunrise 3.2s ease 0 infinite alternate; 
    -ms-animation:sunrise 3.2s ease 0 infinite alternate; 
    -o-animation:sunrise 3.2s ease 0 infinite alternate; 
} 

@-moz-keyframes sunrise { 
    0% {background:rgba(255,255,204,.23);} 
    75% { background:rgba(255,255,204,0.5); } 
    100% { background:''; } 
}

然而，Firefox的实施似乎并没有工作。背景颜色全部以rgba格式设置但每个#sun格具有不同的颜色。

可能是什么问题？

来源

2013-03-22 Kendall

你发布的代码是非常不完整的，但有很多事情是不正确的。

你应该始终写前缀的版本最后，从未的前缀的。
-ms-border-radius and -o-border-radiusnever never！而且除非你需要支持FF3.6，-moz-border-radius是无用的。 -webkit-border-radius这几天也几乎没用 - 参见http://caniuse.com/#feat=border-radius
Firefox 16+（当前版本是19）支持前置关键帧动画！见http://caniuse.com/css-animation
0s，而不是0！另外延迟的默认值正好是0s反正这样你就可以忽略它，只写animation: sunrise 3.2s infinite alternate;（以同样的方式，你可以省略ease，这是计时功能的初始值）
background: rgba(255,255,204,0)，不background: ''！

还有一个问题：为什么要用这么大的border-radius？我的笔记本电脑屏幕比任何需要如此巨大的border-radius都小得多。如果你只是制作一张光盘，给你的元素等于width和height并设置border-radius: 50%。

来源

2013-03-22 16:01:35 Ana

ok gothca！我只是试图抓住所有低端浏览器。至于背景是'';每个div具有不同的背景颜色......所以它们都混合成一种颜色，但是恢复为各自不同的默认颜色，因此背景不同：'' – Kendall 2013-03-23 01:21:53

在Firefox CSS3关键帧动画不能正常工作

回答

相关问题