如何使用JQuery在每次点击时重复使用css的动画集？

Question

我在css中创建了一个旋转动画,它采用1s并且使用类.comet设置了"前进".如何在每次点击外部元素时启动动画？

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

Answer 1

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

资源:

1. 如何在JavaScript中捕获CSS3动画事件
2. jQuery .one()