animation:none 究竟是做什么的？

Question

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

首先，它是动画（旋转 X）通过点击时添加的 class。在下一次点击时，添加了另一个 class，它添加了一个 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 属性的动画。因此，当您修改其静态 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>

animation:none 究竟是做什么的？

What does animation:none do exactly?

css

css-transitions

css-transforms

css-animations