How can i repeat an animation set with css, at every click using JQuery?

Question

I created a rotation animation in css that takes 1s and has 'forwards' set with a class .comet . How can i have that animation start at every click on an exterior element?

 #carousel #big_bubble #cometa.rotation{animation:rotation 1s forwards; -moz-animation:rotation 1.5s forwards; -webkit-animation:rotation 1s forwards; -o-animation:rotation forwards 1s; }
    @-moz-keyframes rotation{
        from{transform:rotate(0deg);}
        to{transform:rotate(-360deg);}
 @-webkit-keyframes rotation{
        from{-webkit-transform:rotate(0deg);}
        to{-webkit-transform:rotate(-360deg);}
    }

Can you provide a FIDDLE link ?

Roger
– Roger

2013-02-25 12:13:54 +00:00
Commented Feb 25, 2013 at 12:13 — Roger
– Roger, Commented Feb 25, 2013 at 12:13
i provided the animation on CSS.

Dan Ovidiu Boncut
– Dan Ovidiu Boncut

2013-02-25 12:32:26 +00:00
Commented Feb 25, 2013 at 12:32 — Dan Ovidiu Boncut
– Dan Ovidiu Boncut, Commented Feb 25, 2013 at 12:32

Riccardo Volpe · Accepted Answer · 2014-12-19 01:04:51Z

8

$(function() {// Shorthand for $( document ).ready()
    $( ".trigger" ).click(function(e) {
        e.preventDefault();
        $(this).addClass( "animation" ).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){
            $(this).removeClass( "animation" );
        });
    });
});

Resources:

edited Dec 19, 2014 at 1:04

answered Dec 19, 2014 at 0:44

Riccardo Volpe

1,6731 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2013-02-25 12:42:10Z

3

Not sure I understand you right. Anyway:

$('#button').click(function() {
    var el = $('#cometa').addClass('rotation');
    setTimeout(function() {
        el.removeClass('rotation');
    }, 1000);
});

http://jsfiddle.net/EPv3B/

answered Feb 25, 2013 at 12:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Dan Ovidiu Boncut Over a year ago

We shared the aproximate same answer on aproximate same time. It works. I only had to add extra time for removing class - the animation didn't finished very smooth with only 1000ms. Thx for your contribution anyway :)

Tarun Kumar · Accepted Answer · 2013-02-25 12:38:00Z

0

On every click of the a element you add the css class to the element . check this code .

if .comet is your css animation class then

$(document).ready(function(){
     $('#everybutton_element_id').click(function (e) {
            $(this).addClass('comet');
            $(this).delay(2000).removeClass('comet');
     });
});

repeat the same code for any no of elements on which you want to implement it .

edited Feb 25, 2013 at 12:38

answered Feb 25, 2013 at 12:19

Tarun Kumar

5283 silver badges14 bronze badges

4 Comments

Dan Ovidiu Boncut Over a year ago

but it adds the class and it stays there. at the second click the animation it doesn't take place.

Tarun Kumar Over a year ago

do you have many buttons or just one button . on which you want to fire this css class .

Tarun Kumar Over a year ago

i have edited my code above . use it now it will work fine . as you want it to work .

Dan Ovidiu Boncut Over a year ago

i provided the tab yesterday

Dan Ovidiu Boncut · Accepted Answer · 2013-02-25 12:43:14Z

0

$('body').on('click', '#next', function() {
     $("#cometa").addClass("rotation");
     setTimeout(function () {
    $("#cometa").removeClass('rotation');
}, 1500);
});

This works for my problem. I remove that class after animation-time is finished.

answered Feb 25, 2013 at 12:43

Dan Ovidiu Boncut

3,1754 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

How can i repeat an animation set with css, at every click using JQuery?

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related