在动画-填充-模式：前进之后，悬停时的CSS变换和过渡不起作用 [英] CSS transform and transition on hover do not work after animation-fill-mode: forwards

问题描述

页面加载时，我使用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);
}

View on 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%;
}

有什么想法吗？

推荐答案

当动画填充模式为"向前"时，转换为什么不起作用？

根据W3C pec：(重点是我的)

默认情况下，动画在应用它的时间(在元素上设置"Animation-Name"属性)和开始执行的时间(由"Animation-Delay"属性确定)之间不会影响属性值。此外，默认情况下，动画结束后不会影响属性值(由"Animation-Duration"属性确定)。"Animation-Fill-Mode"属性可以覆盖此行为。

如果"Animation-Fill-mode"的值为"Forwards"，则在动画结束(由其"Animation-Iteration-Count"确定)之后，动画将应用动画结束时间的属性值。

上述意味着即使在动画结束之后，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;

但scale不是需要转换的属性。这只是需要完成的转换类型。属性为transform，因此代码应如下所示：

transition: transform 1s ease;

如果您进行此更改，则transition将在animation-fill-mode更改时起作用。

这篇关于在动画-填充-模式：前进之后，悬停时的CSS变换和过渡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！