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属性的动画。因此，当您修改其静态transform时，您无法看到更改，因为它已被动画覆盖。

然后，如果删除动画，则会在transform中看到更改。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

动画是什么：没有做到什么？

1 个答案: