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

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

.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');

但它不起作用。类被添加，但动画没有发生。

---

有人知道为什么会发生这种情况以及如何修复吗？

关键帧的名称稍有不同，不适合调用。很抱歉，这太愚蠢了…

因为所有动画属性除了名称之外都是相同的，请尝试设置

动画名称

而不是整个动画属性。很抱歉引入jQuery，但您可以尝试

$.animate（{}，timeDelay，callbackFunction）

。在callbackfunc中，您可以再次设置动画。另一种选择是在加载此元素时添加setTimeout，然后添加另一类第二个动画。但不确定这是否有效。我还建议使用动画功能。你想用你的代码实现什么？请添加JSFIDLE。。。您的代码根本不做动画。。。