Question

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

请看我的小提琴。

@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;}

我该怎么做？

Answer 1

正如@Fabrizio Calderan指出的那样，您必须克隆，删除并附加一个新元素才能重新启动动画。只是删除和添加类将无法工作，因为我们将重新启动动画，而不会告诉动画停止，因此不会激活监听器......

所以为了解决你的问题，你应该重新创建并附加一个像这样的新元素（这是保持简单的jQuery方法，但你也可以用vanilla JS来做）：

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

作为CSS提示，animation-delay属性也可以在通用animation属性中指定。喜欢： animation: single-animation-name animation-duration animation-direction animation-delay

使用此更新的小提琴查看完整解决方案：https://jsfiddle.net/75qb2sfk/3/ 注意：我将jQuery添加到小提琴中以保持代码简单，并重新构建CSS以获得动画的特定类）

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

Css3动画重置选项

1 个答案: