CSS变换和悬停时的转换在动画填充模式后不起作用:向前

Question

当页面加载时，我使用CSS动画来滑入div。（铬）

我使用animation-fill-mode: forwards;来保持新状态。

从那里我想有一个简单的悬停动画，使用transform:scale(2);，并使其过渡超过1秒。

我的CSS:

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

.box:hover{
  transform: scale(2);
}

Codepen 视图

如果我在悬停时使用一个简单的更改，比如border-radius，它可以工作：

.box{
  transition: border-radius 0.25s ease;
}
.box:hover{
  border-radius: 100%;
}

不知怎的，最初的CSS动画干扰了元素悬停状态的转换/转换。

如果我更改悬停以删除animation-fill-mode，则transform将工作，但不能转换：

.box:hover{
  animation-fill-mode:none;
  border-radius: 100%;
}

有什么想法吗？

Answer 1

为什么动画填充模式为正向时变换不起作用

根据W3C规范：（重点是我的）

默认情况下，动画在应用时间（在元素上设置"animation name"属性）和开始执行时间（由"animation-delay"属性确定）之间不会影响属性值。此外，默认情况下，动画结束后不会影响属性值（由"动画持续时间"属性确定）。"动画填充模式"属性可以覆盖此行为。

如果"动画填充模式"的值为"向前"，则在动画结束后（由其"动画迭代计数"确定），动画将应用动画结束时的属性值。

以上意味着，即使在动画结束之后，UA也必须在元素上应用并保持transform。这在某种程度上意味着动画中提到的transform优先，因此在:hover状态中提到的transform没有效果。

当应用animation-fill-mode: none或animation-fill-mode: backwards时，UA不必在动画结束后保持变换状态（意味着它有点像transform: none），因此:hover选择器内的transform工作。

这种行为在最新版本的Chrome和Firefox中是一致的。在IE11和Edge中，无论为animation-fill-mode属性提供了什么值，在:hover选择器中指定的transform都不起作用。

---

为什么即使填充模式更改为无，转换也不起作用

我不确定CodePen中的代码是否是原始代码，或者您是否为测试做了任何更改，但在该演示中错误地指定了transition属性，这就是为什么没有发生转换的原因。

存在的代码是：

transition: scale 1s ease;

但CCD_ 19不是需要转换的属性。这只是需要进行的转换类型。属性是transform，因此代码应如下所示：

transition: transform 1s ease;

如果进行此更改，则如果animation-fill-mode发生更改，则transition将工作。