CSS3 animation-play-состояние приостановлено, не работает в браузерах iPad - PullRequest
Новая
       9

CSS3 animation-play-состояние приостановлено, не работает в браузерах iPad

0 голосов
/ 04 октября 2018

У меня есть простой 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

...