Firefox 中的 CSS3 关键帧动画不起作用

Question

我有以下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 div 都有不同的颜色。

可能是什么问题？

Answer 1

您发布的代码非常不完整，但有不少地方不合适。

• 您应该始终编写无前缀版本最后，以前从来没有 前缀的。
• -ms-border-radius 和 -o-border-radius 从未存在过！除非你 需要支持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%。