How To Refresh Animation On Click?

Forums CSSHow To Refresh Animation On Click?
Staff asked 2 months ago

How To Refreshing animation on click using jQuery?

 

Can you show that function code?

Tarun Thummar replied 2 months ago

Yes

Prince Dhameliya replied 2 months ago

Is your animation work with jQuery?

Tarun Thummar replied 2 months ago

Answers (1)

Add Answer
Staff answered 1 month ago

Here’s the best approach to go about it.

Create an active animation class.

#className.active {
    -webkit-animation-name: cycle;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-name: cycle;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -moz-animation-name: cycle;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
}

Use JQuery, and remove the active class every time the animation ends.

$(document).ready(function() {
    $(".activate").click(function() {
        $('#className').addClass('active');
        $('#className').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
        $(this).removeClass('active');
        });

    });
});

 

Subscribe

Select Categories