简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - mobile css animation playback state pause does not work on ios animation-play-state
给我你的怀抱
给我你的怀抱 2017-06-26 10:53:05
0
1
1157

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>
给我你的怀抱
给我你的怀抱

reply all(1)
给我你的怀抱
给我你的怀抱2017-06-26 10:55:05 1 floor

animation-play-state is invalid on iOS.

You can overlay the status. Here is an example:

Link description

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！