Jquery Css3动画重置选项

在我的示例中，我有多个动画。动画完成后，将显示重置按钮。如果单击此重置按钮，动画将从第一个动画开始。我找到了这个地方

请看我的小提琴

---

我该怎么做

正如

@Fabrizio Calderan

所指出的，您必须克隆、删除并附加一个新元素才能重新启动动画。 仅仅删除和添加类是不起作用的，因为我们将重新启动一个动画，而不告知动画已停止，因此侦听器将不会被激活

因此，要解决您的问题，您应该像这样重新创建并附加一个新元素（这是保持简单的jQuery方法，但您也可以使用vanilla JS）：

作为CSS提示，

动画延迟

属性也可以在通用的

动画

属性中指定。比如：

动画：单个动画名称动画持续时间动画方向动画延迟

查看此更新小提琴的完整解决方案： 注意：我在fiddle中添加了jQuery以保持代码的简单性，并对CSS进行了重组，使其具有特定的动画类）

---

更新：在阅读了Fabrizio的cstrick链接之后，似乎有一种方法可以通过删除然后添加类（如果我们使用计时器）来重新启动动画。但是正如他们在文章中所写的，这不是一个好方法…

请参见：基本上，您需要包装所有动画元素，克隆包装器，从DOM中删除它并重新附加它。您可以尝试使用jQuery删除并添加类动画类。我想这应该会重新启动动画

@keyframes heightanimation {
0%, 60%{max-height:643px;}
70%,100% {max-height:80px;}
}
#animation-bg{ background-color:#00A0CC; max-height:643px; overflow: hidden; animation: heightanimation 3s forwards; animation-delay: 3s; position:relative;}

function reanimateWrapper(){
    var $wrapper = $('#animation-bg');
    var $clonedWrapper = $wrapper.clone().removeClass('animate');
    $wrapper.remove();
    $('body').prepend($clonedWrapper);
    $('#animation-bg').addClass('animate');
}