动画执行完后再次执行

正常情况下css3动画执行结束以后就停止了,如果要再次执行可以再animationend事件里移除动画然后重新添加动画。

document.getElementById("someElementID").addEventListener('animationend',function(){
    this.classList.remove('someAnimationClass');
});    

在执行完动画并移除了有动画的类后,再添加有动画的类,就可以再次动起来:

document.getElementById("someElementId").classList.add('p1animation');

 

posted @ 2018-08-03 14:56  申小贺  阅读(470)  评论(0编辑  收藏  举报