Question

这适用于Chrome，但不适用于Firefox （以下是online demo）：

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);
    }
}

如果我删除了转换，它可以正常工作。似乎转换在被悬停时激活时会移除填充模式设置的状态：转发。

在firefox中有没有解决方法？

Answer 1

好吧，我为起点0%添加了关键帧以使其正常工作：

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

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

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

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

<强> WORKING DEMO

更新

为了解决渲染问题（动画开始时），您需要将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之间存在冲突。

<强> UPDATED DEMO

Answer 2

它适用于Firefox。我把你的例子放到JSFiddle中，正如你在问题中所展示的那样，它对我有用。

填充模式的CSS动画，包括转换无法在Firefox中正常工作

2 个答案:

更新