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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
animation-play-state
You can overlay the status. Here is an example:is invalid on iOS.Link description