Html CSS动画:在Chrome中工作,但在Firefox中不工作?
在旋转动画中,可以在Chrome中使用,但不能在Firefox中使用。为什么?Html CSS动画:在Chrome中工作,但在Firefox中不工作?,html,css,css-animations,Html,Css,Css Animations,在旋转动画中,可以在Chrome中使用,但不能在Firefox中使用。为什么? @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-trans
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#example {
background: red;
width: 100px;
height: 100px;
-moz-animation: rotate 20s linear 0 infinite;
-webkit-animation: rotate 20s linear 0 infinite;
}
当前的Firefox实现失败,除非
0
的时间值有单位。使用0s
或0ms
注意:显式地允许数字0(不带单位)作为长度值,但对于其他值没有这样的说明。就我个人而言,我希望这会有所改变,但目前Firefox的行为并没有错误。你能指定你的浏览器版本吗?值得一试的是,如果我们将
20s
更改为2ms
,正方形根本不会动画。@wesley murch感谢你的编辑!iPad键盘缺少反勾键真的让我的堆栈溢出。@WesleyMurch:FF7.0.1 for Mac上的动画没有移动>0虽然这个答案的措辞听起来像Firefox有问题,但实际上它遵循了标准,因为0
不是有效的时间值。这是因为当时我仍然希望W3C会选择一致性而不是任意性。