使用JavaScript控制CSS Animations(动画)

animation-play-state属性

当你想在动画执行过程中暂停，并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀)：

动画暂停播放
animation-play-state: paused;

动画开始播放
animation-play-state: running;

***获取dom元素控制动画暂停***
element.style.webkitAnimationPlayState = "paused";

***获取dom元素控制动画播放***
element.style.webkitAnimationPlayState = "running";

参考链接： 

如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡) - DJ.Chen - 博客园 (cnblogs.com)