option css3,jquery - Css3 animation reset option - Stack Overflow

As @Fabrizio Calderan pointed out, you'll have to clone, remove and append a new element to restart the animation.

Just removing and adding the class won't work because we will restart an animation without telling that the animation is stopped so the listener won't be activated...

So to solve your problem you should recreate and append a new element like this (this is the jQuery way to stay simple, but you can do it with vanilla JS too) :

function reanimateWrapper(){

var $wrapper = $('#animation-bg');

var $clonedWrapper = $wrapper.clone().removeClass('animate');

$wrapper.remove();

$('body').prepend($clonedWrapper);

$('#animation-bg').addClass('animate');

}

And as a CSS tips, the animation-delay property can be specified in the generic animation property too. Like :

animation: single-animation-name animation-duration animation-direction animation-delay

See full solution with this updated fiddle : https://jsfiddle.net/75qb2sfk/3/

Note: I added jQuery to the fiddle to keep the code simple, and restructured your CSS to have a specific class for animations)

Update: after reading the CSStrick link of Fabrizio, it seems that there is a way to restart the animation by removing then adding the class if we use a timer. But as they wrote in the article, this isn't a good way to go...