HTML动画能在手机播放吗,移动端css动画播放状态暂停在ios不起作用 animation-play-state...

移动端css动画播放状态暂停在ios不起作用 animation-play-state

我想点击图片图片静止，再点一下图片继续旋转。在安卓手机上可以实现，但是在ios,第一次点击图片继续旋转，没有静止动作，反而在第二点击的时候，图片在第一次点击的位置闪一下，继续旋转。

#wls .musicCon{width: 35px;height: 35px;position:fixed;top:15px;right:15px;z-index: 9999; }

img.rotate{

animation:spin 4s infinite linear;

-moz-animation:spin 4s infinite linear;

-webkit-animation:spin 4s infinite linear;

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

animation-play-state: running;

-ms-animation-play-state: running;

-o-animation-play-state: running;

}

@keyframes spin {

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@-o-keyframes spin {

0% {

-o-transform: rotate(0deg);

}

100%{

-o-transform:rotate(360deg);

}

}

@-moz-keyframes spin {

0% {

-moz-transform: rotate(0deg);

}

100%{

-moz-transform:rotate(360deg);

}

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg);

}

100%{

-webkit-transform:rotate(360deg);

}

}

img.pauseWalk {

animation:spin 4s infinite linear;

-moz-animation:spin 4s infinite linear;

-webkit-animation:spin 4s infinite linear;

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

animation-play-state: paused;

-ms-animation-play-state: paused;

-o-animation-play-state: paused;

}

var num=1;

$("#wls .musicCon").bind("click",function(){

if(num==1){

$(this).removeClass("rotate");

$(this).addClass("pauseWalk");

$("#bgm")[0].pause();

num++;

return num;

}else{

$(this).removeClass("pauseWalk");

$(this).addClass("rotate");

$("#bgm")[0].play();

num=1;

return num;

}

})