CSS3在Firefox上设置边框半径动画不起作用

CSS3在Firefox上设置边框半径动画不起作用,css,firefox,animation,Css,Firefox,Animation,我目前正在尝试制作一个动画扩展球体(圆),它只是一个仅使用css3应用边界半径的div 我设法使动画在webkit浏览器上工作,保持了动画元素的球体/圆形,但我不知道为什么它在firefox上不工作。它确实应用了一些边界半径(大约20px),但不像webkit那样工作 这是我使用的代码 @-webkit-keyframes expandSphere { 0%{padding:10px; opacity: 0;} 25%{height: 150px; border-radius:

我目前正在尝试制作一个动画扩展球体(圆),它只是一个仅使用css3应用边界半径的div

我设法使动画在webkit浏览器上工作,保持了动画元素的球体/圆形,但我不知道为什么它在firefox上不工作。它确实应用了一些边界半径(大约20px),但不像webkit那样工作

这是我使用的代码

@-webkit-keyframes expandSphere
{
    0%{padding:10px; opacity: 0;}
    25%{height: 150px; border-radius: 150px; width:150px; left:520px; top:200px;}
    55%{height: 350px; border-radius: 500px; width:350px; left:420px; top:100px;}
    75%{height: 547px; border-radius: 700px; width:700px; top:0; left:250px;}
    100%{height:547px; opacity: 1; top:0px; left:0; width:1180px; border-radius: 0;}
}
@-moz-keyframes expandSphere
{
    0%{padding:10px; height:20px; width:20px; opacity: 0; -moz-border-radius: 50px;}
    25%{height: 150px; width:150px; left:520px; top:200px; -moz-border-radius: 150px;}
    55%{height: 350px; width:350px; left:420px; top:100px; -moz-border-radius: 500px;}
    75%{height: 547px; width:700px; top:0; left:250px; -moz-border-radius: 700px;}
    100%{height:547px; opacity: 1; top:0px; left:0; width:1180px; -moz-border-radius: 0;}
}

您希望在不需要时停止使用供应商前缀


特别是,请参见

您想在不需要时停止使用供应商前缀


特别是,请参见

Coool man!谢谢成功了。现在我继续看歌剧。我在这方面没有运气。对于Opera,使用不固定的关键帧动画。并将它们添加到前缀后面。Firefox还支持关键帧动画。见鬼!谢谢成功了。现在我继续看歌剧。我在这方面没有运气。对于Opera,使用不固定的关键帧动画。并将它们添加到前缀后面。Firefox还支持关键帧动画。看见