带有填充模式的 CSS 动画，包括过渡在 Firefox 中无法正常工作

Question

这在Chrome中工作正常，但在Firefox中则不行（这是在线演示）：

.HTML

<div class="box"></div>

.CSS

.box {
    background-color:blue;
    width:100px;
    height:100px;
    margin: 0 auto;
    transform: translate(-200px);
    animation-name: test;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    transition: all 0.25s ease;
}
.box:hover {
    border-radius: 100%;
}
@keyframes test {
    100% {
        transform: translate(0px);
    }
}

如果我删除过渡，它可以正常工作。似乎过渡在被 on 悬停激活时，会删除填充模式设置的状态：向前。

火狐有办法解决吗？

Answer 1

好吧，我为起点添加了一个关键帧，0%让它工作：

@keyframes test{
  0% {
     transform: translate(-200px);
  }
  100% {
      transform: translate(0px);
  }
}

使用上述方法，您可以从 .box 元素中删除 transform 属性。

此外，对于旧版本的 Web 浏览器，请考虑使用供应商前缀，例如 -webkit- 和 -moz- ， ...@keyframes和其他 CSS3 属性。

_{PS：我用FF 9.0.1测试了演示。此问题可能仅在早期版本的 Web 浏览器中出现。事实上，网络浏览器试图修复您的错误编码，但只有聪明的人才会赢！}

工作演示

更新

为了解决渲染问题（当动画开始时），您需要将transition-property从all更改为您真正想要的特定属性。（在这种情况下border-radius）：

.box{
  animation-name: test;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  transition: border-radius 0.25s ease;
}

问题在于animation和transition之间对transform财产的冲突。

更新的演示

Answer 2

它在火狐上对我有用。 我把你的例子放到JSFiddle中，就像你在问题中展示的那样，它对我有用。