html5 - javascript中animation运动， 怎样通过点击事件让他重复执行

Question

怎样才可以做到让移动端上的touchstart事件每触摸一次图片图片转动360度，

        @keyframes spi{ 
            100%{
                transform: rotate(360deg);
            }
        }
        
        
        $('#ff').off('touchstart').bind('touchstart',function(){
            $('#ff').css('animation','spi 3000ms linear  ')

        });

这样写只可以触发一次，即点击第一次的时候才有效；

Answer 1

应该是要把动画的触发写在click事件里

Answer 2

你都off，还能再操作吗？应该直接这样吧？

$('#ff').bind('touchstart',function(){
            $('#ff').css('animation','spi 3000ms linear  ')
        });

Answer 3

$('#ff').stop().bind('touchstart',function(){

   $('.baiXing-img').addClass('active');
   setTimeout(function () {   
        $('.baiXing-img').removeClass('active');
   }, 1000); 

});
已经解决啦，把animation的代码放在一个新的class名字中，通过一个延时器删除class名实现,不过还是会有bug,点击过快就不行，希望可以帮到有需要的人；也求大神可以帮忙修改一下