关于Safari浏览器 CSS3动画暂停的问题

HTML如下

<div class="zhuaziContent" id="zzc">

<div class="btnz" >Go</div>

css如下

.zhuaziContent{
    display: inline-block;
    position: relative;
    width: 159px;
    height: 400px;
    top: -33px;
    left:100px;
    background: red;
    animation: zc 3s linear alternate infinite  ;
    -webkit-animation: zc 3s linear alternate infinite ;}
@-webkit-keyframes zc {/*safari 和Chrome*/
    0%{-webkit-transform: translateX(0px);}
    50%{-webkit-transform:translateX(140px)}
    100%{-webkit-transform:translateX(280px)}
}
@keyframes zc {
    0%{transform: translateX(0px);}
    50%{transform:translateX(140px)}
    100%{transform:translateX(280px)}
}.btnz{
    position: absolute;
    bottom: -80px;
    left: 50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    font-size: 56px;
    background: #0044FF;
    cursor: pointer;
}

var zzc = document.getElementById("zzc");
var btn=document.getElementsByClassName("btnz")[0];


btn.addEventListener("touchstart",function(){
  zzc.style.webkitAnimationPlayState="paused";
    zzc.style.animationPlayState = "paused";
},false);

主要动画效果就是  zhuaziContent  这个红色矩形 左右来回移动  点击效果就是停止

也采用了添加CSS控制方法

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

经多次测试 解决办法如下 原理未知！ JS如下

  window.onload=function(){
    zzc.style.animationPlayState = "running";
};
btn.addEventListener("touchstart",function(){
  zzc.style.webkitAnimationPlayState="paused";
    zzc.style.animationPlayState = "paused";
},false);

/* css代码如下*/
.zhuaziContent{
    display: inline-block;
    position: relative;
    width: 159px;
    height: 400px;
    top: -33px;
    left:100px;
    background: red;
    animation: zc 3s linear alternate infinite  ;
    -webkit-animation: zc 3s linear alternate infinite ;
        animation-play-state:paused;
     -webkit-animation-play-state:paused;
     /*取消默认running*/