CODEWITHSUNDEEP
jquerycssanimation
Akash
Akash

Reputation: 295

Css3 animation reset option

In my example, I had multiple animation. After the animation is finished, the reset button will be displayed. If I click this reset button the animation will start from the first animation. I found this location.

Please see my fiddle.

https://jsfiddle.net/75qb2sfk/2/

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

How can I do this?

Upvotes: 1

Views: 84

Answers (1)

ylerjen
ylerjen

Reputation: 4249

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...

Upvotes: 1

Related Questions