Come posso ripetere un'animazione impostata con css, ad ogni clic usando JQuery? - jquery, html, css, css3, animazione

Ho creato un'animazione di rotazione in CSS che impiega 1 secondi e ha "in avanti" impostato con una classe .comet. Come posso far iniziare quell'animazione ad ogni clic su un elemento esterno?

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

risposte:

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

risorse:

1. Come acquisire eventi di animazione CSS3 in JavaScript
2. jQuery .one ()

Non sono sicuro di averti capito bene. Comunque:

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

http://jsfiddle.net/EPv3B/

Ad ogni clic dell'elemento a si aggiunge la classe css all'elemento. controlla questo codice.

Se .comet è la tua classe di animazione CSS allora

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

ripetere lo stesso codice per qualsiasi numero di elementi su cui si desidera implementarlo.

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

Questo funziona per il mio problema. Rimuovo quella classe al termine del tempo di animazione.