Question

我有这个元素已经有一个动画在某个时间触发：

.box {
  width: 100%;
  height: 87.5%;
  background: #DDD;
  position: absolute;
  top: 12.5%;
  left: 0%;
  -webkit-animation: load 0.5s ease-out 5s backwards;
  animation: load 0.5s ease-out 5s backwards;
}

但是在某个时候，总是在动画结束后我想在同一个元素上发射一个新动画。所以我认为创建一个新类并使用JS将它附加到元素上会起作用：

.unload{
  -webkit-animation: unload 0.5s ease-out 0.5s backwards !important;
  animation: unload 0.5s ease-out 0.5s backwards !important;
}

document.querySelector(".box").classList.add('unload');

但它不起作用。该类被添加但动画没有发生。有谁知道为什么会这样，以及如何解决它？

Answer 1

关键帧的名称略有不同，并且不适合通话。对不起，这真是太蠢了......

当元素已经有一个时，如何触发新的css动画？

1 个答案: