本篇文章探讨了HTML5+CSS3从入门到精通之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
 
1 <div>
2     <img src="//img001.ddweilai.com/mtrain/2018/03/5ab3630ccbd9e.jpg"/>
3 </div>
4 <div>按钮</div>
 
js
 
复制代码
 1 var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;
 2 var isPlaying = false;
 3 var imgWrapper = $(".img-wrapper")[0];
 4 var img = $('.img-wrapper').find('img')[0];
 5 function pause() {
 6     isPlaying = false;
 7     var iTransform = getComputedStyle(img).transform;
 8     var cTransform = getComputedStyle(imgWrapper).transform;
 9      imgWrapper.style.transform = cTransform === 'none'
10                  ? iTransform
11                  : iTransform.concat(' ', cTransform);
12                   $(img).removeClass('animation-start');
13 }
14 function play() {
15     isPlaying = true;
16     $(img).addClass('animation-start');
17 }
18 if(!isIPHONE){
19     $(imgWrapper).addClass('animation-start').addClass('suspended');
20 }
21 $(".btn").click(function(){
22     if(isIPHONE){
23         isPlaying ? pause() : play();
24     }else{
26          if($(imgWrapper).hasClass('suspended')){
　　　　　　　　　　$(imgWrapper).removeClass('suspended');
29         }else{
30              $(imgWrapper).addClass('suspended');
32         }
33     }
34 });    

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！