动画到底能做什么?

Question

我这里有一个HTML元素，它的起始样式是这样的:transition: transform 2s;

首先，它是动画(它旋转)通过点击时添加的类。在下一次点击时，添加了另一个类，它添加了一个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>