animation:none 到底是做什么的？

Question

我在这里有一个具有这种起始样式的 HTML 元素： transition: transform 2s;

首先，它通过单击添加的类进行动画处理（它旋转 X）。在下一次单击时，将添加另一个类，该类添加了一个应该垂直移动元素的transform3d，根据上述规则，这应该需要 2 秒。

该的Transform3D：除非我添加此规则的元素不会生效animation: none为好。我对animation: none实际做什么感到困惑。转换已应用动画的元素是否会出现复杂情况？

Answer 1

animation: none将所有animate-*属性设置为其初始值：

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

问题是您的元素具有影响其transform属性的动画。因此，当您修改其 static 时transform，您看不到更改，因为它已被动画覆盖。

然后，如果您删除动画，您会看到transform.

这与转换无关，它会发生在任何属性上，例如color：

div {
  animation: color-anim 1s infinite;
}
@keyframes color-anim {
  from { color: red }
  to { color: blue }
}

<div>Lorem ipsum</div>
<button onclick="document.querySelector('div').style.color = '#fff'">Make white</button>
<button onclick="document.querySelector('div').style.animation = 'none'">Remove animation</button>