css3 移动端旋转动画暂停

 音乐播放图片旋转动画 ios不支持暂停： animation-play-state: paused;

@-webkit-keyframes rotate{
    100% {
           transform: rotate(1turn);
        }
}
.img-wrapper{
    width: 200px;    
    height: 200px;
    margin: 50px auto 0;
    overflow: hidden;
    border-radius: 100px;
}
.animation-start{
    animation: rotate 5s linear infinite;
}
.suspended{
    animation-play-state: paused;
}
.img-wrapper img{
    width: 100%;
    border-radius: 100px;
}
.btn{
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 20px;
    line-height: 30px;
    bottom: 100px;
    border: 1px solid #ccc;
}

 html

 

<div class="img-wrapper">
    <img src="http://img001.ddweilai.com/mtrain/2018/03/5ab3630ccbd9e.jpg"/>
</div>
<div class="btn">按钮</div>

 

js

 

var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;
var isPlaying = false;
var imgWrapper = $(".img-wrapper")[0];
var img = $('.img-wrapper').find('img')[0];
function pause() {
    isPlaying = false;
    var iTransform = getComputedStyle(img).transform;
    var cTransform = getComputedStyle(imgWrapper).transform;
     imgWrapper.style.transform = cTransform === 'none'
                 ? iTransform
                 : iTransform.concat(' ', cTransform);
                  $(img).removeClass('animation-start');
}
function play() {
    isPlaying = true;
    $(img).addClass('animation-start');
}
if(!isIPHONE){
    $(imgWrapper).addClass('animation-start').addClass('suspended');
}
$(".btn").click(function(){
    if(isIPHONE){
        isPlaying ? pause() : play();
    }else{
         if($(imgWrapper).hasClass('suspended')){
　　　　　　　　　　$(imgWrapper).removeClass('suspended');
        }else{
             $(imgWrapper).addClass('suspended');
        }
    }
});