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');

         }

     }

 });