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

Firefox中的CSS3关键帧动画无法正常工作

1 个答案: