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%。