webkit 暂时需要加上 -webkit- 厂家声明(Vendor prefixes)

暂停和开始动画，打开控制台

$('#running_ball')[0].style.webkitAnimationPlayState='paused';//webkit
$('#running_ball')[0].style.animationPlayState='paused';//firefox

$('#running_ball')[0].style.webkitAnimationPlayState='running';//webkit
$('#running_ball')[0].style.animationPlayState='running';//firefox

或者 addClass removeClass

.paused{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused; 
  animation-play-state:paused;
}

完整代码如下：

<div id="running_ball"></div><div id="running_ball2"></div>

<style> 
#running_ball{
position:absolute;
width:80px;
height:80px;
background:red;
border-radius: 100%;
opacity:0.6;
animation:gsCircle 4s linear infinite;
-webkit-animation:gsCircle 4s linear infinite; 
}

@keyframes gsCircle
{
25%  {transform:translate(20px,0) scale(0.8);}
50%  {transform:translate(0,0) scale(0.6);}
75%  {transform:translate(-20px,0) scale(0.8);}
100% {transform:translate(0,0) scale(1);}
}

@-webkit-keyframes gsCircle 
{
25%  {-webkit-transform:translate(20px,0) scale(0.8);}
50%  {-webkit-transform:translate(0,0) scale(0.6);}
75%  {-webkit-transform:translate(-20px,0) scale(0.8);}
100% {-webkit-transform:translate(0,0) scale(1);}
}

#running_ball2 {
width:80px;
height:80px;
background:blue;
border-radius: 100%;
opacity:0.6;
animation:gsCircle 4s linear infinite;
-webkit-animation:gsCircle 4s linear infinite; 
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
</style>