js控制动画暂停、开始及js外部样式和style属性的添加移除

动画效果主要是css的animation属性：http://www.runoob.com/cssref/css3-pr-animation.html

即动画的暂停和继续是修改属性：

animation-play-state

而js中修改style属性的方法，可以参考这篇文章写的：
js外部样式和style属性的添加移除

文章中提到了修改的方法，即：

对于含有中划线的css属性，将每个中划线去点并将每个中划线后的第一个字母大写，通过style.改写后的属性名访问。如：obj.style.borderBottom = "";//清空border-bottom属性
所以修改style的animation-play-state的方法：

document.getElementById("loading").style.WebkitAnimationPlayState

这里的动画css:

.loading {
position: relative;
width: 0;
padding: 20px;
background:
linear-gradient(rgba(0,102,205,1) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.4) 70%),
linear-gradient(to left, rgba(0,102,205,.2) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.8) 70%);
background-repeat: no-repeat;
background-size: 10% 100%, 100% 10%;
background-position: 50% 0%, 0 50%;

-webkit-animation: loading .7s infinite steps(8); /*绑定的关键帧名称 动画时间 动画循环次数 */
animation: loading .7s infinite steps(8);
}

html:

<div id="loading" class="loading"></div>

<p align="center">
<input  type="button" class="btn btn-default" value="暂停"   onclick ="loadingStop()" />
<input  type="button" class="btn btn-default" value="继续"   onclick ="loadingStart()" />
</p>

对应的js：

/*暂停扫描按钮*/
function loadingStop(){
document.getElementById("loading").style.animationPlayState = "paused";
document.getElementById("loading").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代码
}
/*继续扫描按钮*/
function loadingStart(){
document.getElementById("loading").style.animationPlayState = "running";
document.getElementById("loading").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代码
}