Mobile CSS-Animationswiedergabestatuspause funktioniert nicht im iOS-Animationswiedergabestatus
Ich möchte auf das Bild klicken, um es zu stoppen, und erneut auf das Bild klicken, um die Drehung fortzusetzen. Dies ist auf Android-Telefonen möglich, aber wenn Sie unter iOS zum ersten Mal auf das Bild klicken, dreht es sich ohne statische Bewegung weiter. Wenn Sie jedoch zum zweiten Mal darauf klicken, blinkt das Bild an der Position des ersten Klicks und drehen Sie weiter.
<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>
iOS 上
animation-play-state失效.你可以把状态叠加. 如下示例:
链接描述