javascript - 使用JavaScript控制CSS3关键帧动画

项目场景：

场景1：动画与事件相关，例如特定的场景出现
场景2：点击之后触发动画

---

问题描述：

我的场景：

监听用户的点击，用户在限定的时间内未对屏幕进行点击就触发动画。

---

最初写法:

1、使用jq的addClass和removeClass操作

   
  $('#div').addClass('animation-class');       
  setInterval(function(){
 	$('#div').removeClass('animation-class');       
  },800)
        

出现的问题

删除完第二次添加类的时候，动画不会开始

---

原因分析：

自己分析的错误原因，如果分析有误，请大佬指出！！感恩！！！
原因：在第二次添加class的时候，已经有缓存了，或者是节点已经生成了，不会再重新执行到这一步了

---

解决方案：

不直接添加class名字，而是去操作节点的style属性，先添加属性，再通过定时器改变属性，或者清掉动画属性

function animationOnce(el, time) {
    el.css({
        'animation':'jello-vertical 1.2s both',
        'webkitAnimation':'jello-vertical 1.2s both'
    })
    // - 抖动一次后停止
    setTimeout(function () {
        el.css({
            'animation':'',
            'webkitAnimation':''
        })
    }, time)