javascript - mobile css animation playback state pause does not work on ios animation-play-state
Mobile css animation playback state pause does not work on ios animation-play-state
I want to click on the picture to stop it, and then click on the picture to continue rotating. It can be achieved on Android phones, but on iOS, when you click the picture for the first time, it will continue to rotate without any static movement. Instead, when you click it for the second time, the picture will flash at the position of the first click and continue to rotate.
<style type="text/css">
#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;
}
</style>
<body style="background:#fff" id="wls">
<img src="imgage/music.png" class="musicCon rotate" />
<audio autoplay="autoplay" loop="loop" id="bgm">
<source src="music/bgm.mp3" type="audio/mpeg">
<source src="music/bgm.ogg" type="audio/ogg">
</audio>
<script>
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;
}
})
</script>
</body>