移动端css动画播放状态暂停在ios不起作用 animation-play-state
我想点击图片图片静止，再点一下图片继续旋转。在安卓手机上可以实现，但是在ios,第一次点击图片继续旋转，没有静止动作，反而在第二点击的时候，图片在第一次点击的位置闪一下，继续旋转。
<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失效.你可以把状态叠加. 如下示例:
链接描述