Question

我在页面加载时使用CSS动画来滑动div。（Chrome）

我使用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);
}

https://r3---sn-a5m7zu7e.googlevideo.com/videogoodput?id=o-AOVPXHeRRmIiRNUb

如果我在悬停时使用简单的更改，例如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 pec :(重点是我的）

默认情况下，动画不会影响应用它之间的属性值（在元素上设置'animation-name'属性）和它开始执行的时间（由'animation-delay'决定）属性）。此外，默认情况下，动画结束后动画不会影响属性值（由“animation-duration”属性确定）。 'animation-fill-mode'属性可以覆盖此行为。

如果 'animation-fill-mode'的值为'转发'，则在动画结束后 （由其'animation-iteration-count'确定）， 动画将应用动画结束时的属性值 。

以上意味着即使在动画结束后，UA也必须在元素上应用和维护transform。这有点暗示动画中提到的transform优先，因此transform状态中提到的:hover无效。

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

此行为在最新版本的Chrome和Firefox中保持一致。在IE11和Edge中，:hover选择器中指定的transform无效，无论为:hover属性提供什么值。

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

我不确定CodePen中的代码是否是原始代码，或者您是否对测试进行了任何更改，但在该演示中错误地指定了animation-fill-mode属性，这就是为什么不进行转换的原因。< / p>

存在的代码是：

transition

但transition: scale 1s ease;不是需要转换的属性。它只是需要完成的变换类型。属性为scale，因此代码应如下所示：

transform

如果您执行此更改，则transition: transform 1s ease;会在transition发生更改时生效。

在动画填充模式之后，悬停时的CSS转换和转换不起作用：转发

1 个答案: