Como posso repetir uma animação definida com css, a cada clique usando JQuery? - jquery, html, css, css3, animação

Eu criei uma animação de rotação em css que leva 1s e tem "forwards" definido com uma classe .comet. Como posso iniciar essa animação a cada clique em um elemento externo?

 #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);}
}

Respostas:

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

Recursos:

1. Como capturar eventos de animação CSS3 em JavaScript
2. jQuery .one ()

Não tenho certeza se entendi bem. De qualquer forma:

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

http://jsfiddle.net/EPv3B/

Em cada clique do elemento a você adiciona a classe css ao elemento. verifique este código.

E se .comet é sua classe de animação css então

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

repita o mesmo código para qualquer um dos elementos em que você deseja implementá-lo.

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

Isso funciona para o meu problema. Eu removo essa classe após o término da animação.