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

【问题标题】：How to fire a new css animation when the element already has one?当元素已经有一个新的css动画时，如何触发一个新的css动画？
【发布时间】：2016-02-17 18:45:51
【问题描述】：

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

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

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

【问题讨论】：

由于除了名称之外所有动画属性都相同，请尝试设置animation-name而不是整个动画属性
很抱歉介绍 jQuery，但你可以试试$.animate({},timeDelay, callbackFunction)。在回调函数内部，你可以再次动画。
另一种选择是在加载此元素时添加一个 setTimeout，然后添加另一类第二个动画。但不确定这是否有效。我也建议使用动画功能。
你想用你的代码实现什么？请添加 jsFiddle...您的代码根本没有做动画...

标签： javascript css css-animations

【解决方案1】：

关键帧的名称略有不同，不适合调用。对不起，这很愚蠢......

【讨论】：

【解决方案2】：

六年后，我也遇到了同样的问题，但不知何故我能够弄清楚。我也不妨分享一下。

帮助我的是特异性。我没有将修饰符类直接应用于动画元素，而是将其应用于父 div 并使用后代选择器，如下所示：

HTML

<div class="container container--unload"> //this second class can be added later with JS
  <div class="box">
    //some feature here
  </div>
</div>

CSS

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

.container--unload .box{
  animation: unload 0.5s ease-out 0.5s backwards;
}

document.querySelector(".container").classList.add("container--unload");

经过测试，似乎可以正常工作。我省略了关键帧。

干杯！

【讨论】：