jquery – CSS3 – 添加类以触发动画并在完成时删除类

我有一个div,当我点击它时,jquery添加了一个启动动画运行的类.当动画停止时(3秒后)我希望删除该类,这样当再次单击div时,动画将重新开始.

这只是测试,目前只有Chrome浏览器.

这是我的@L_874_6@：

.spin360
{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forWARDs;
}

@-webkit-keyframes spin 
{
    0% { -webkit-transform: rotateX(0); }
    100%   { -webkit-transform: rotateX(-360deg); }
}

这是我的脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $('#spinButton').click(function () {
            $('#shape').addClass('spin360');
        });
    });
</script>

这是我尝试过的：

<script type="text/javascript">
    $(document).ready(function () {
        $('#spinButton').click(function () {
            $('#shape').addClass('spin360').on('webkitAnimationEnd',function () {
                $('#shape').removeClass('spin360');
            });
        });
    });
</script>

和

<script type="text/javascript">
    $(document).ready(function () {
        $('#spinButton').click(function () {
            $('#shape').addClass('spin360');
        });

        $('#spinButton').addEventListener('webkitAnimationEnd',function (E) {
            $('#shape').removeClass('spin360');
        });
    });
</script>

在所有情况下 – 我的动画在第一次点击时运行,但不是后续点击.

$('#spinButton').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd',function (E) {
    $('#shape').removeClass('spin360');
});