CSS3动画播放状态已暂停，无法在iPad浏览器中使用

Question

我有一个简单的animation，除了 iPad （Safari和Chrome）外，它在所有设备和浏览器上都可以正常工作。

问题： animation-play-state: paused在 iPad浏览器中不起作用。

我什至尝试检查inline styles时直接添加elements，但没有成功。

var btnPause = document.getElementById('buttonPause');
var btnPlay = document.getElementById('buttonPlay');

btnPlay.addEventListener('click', function(){
  document.getElementById('box').style.WebkitAnimationPlayState = "running";
  document.getElementById('box').style.animationPlayState = "running";
})

btnPause.addEventListener('click', function(){
  document.getElementById('box').style.WebkitAnimationPlayState = "paused";
  document.getElementById('box').style.animationPlayState = "paused";
})

#box {
  height: 100px;
  width: 200px;
  background-color: red;
  margin: 100px;
  animation: moveIt 10s infinite linear;
}

@keyframes moveIt {
  from {
    transform: rotate(0deg);
  } 
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes moveIt {
  from {
    transform: rotate(0deg);
  } 
  to {
    transform: rotate(360deg);
  }
}

<div id="box"></div>
<button id='buttonPlay'>Play Anim</button>
<br><br><br><br>
<button id='buttonPause'>Pause Anim</button>

JSFiddle