我们要实现动画的播放和暂停，animation-play-state 在安卓端可以使用，但是在 ios 中不起作用，这时可以使用 js 来实现相同效果。
原理
通过 js 获取当前元素的 transform 属性，通过添加、移除 class 实现 animation 动画。
由于移除 animation 后，改变的效果会还原，所以给当前元素添加一个和当前元素同等大小的父元素，让父元素得到改变值。
假设，我们要实现元素<div class="img"></div>的旋转，使用到了 transform 属性
首先需要加一个wrap包裹，即
<div class="wrap">
<div class="img">➤</div>
</div>
随后写 CSS，通过添加 class 实现动画
@keyframes circle {
100%{
transform: rotate(360deg);
}
}
.wrap,.img {
width: 50px;
height: 50px;
} /*父元素和子元素同等大小*/
.img {
background: red; /*便于观察*/
}
.playing {
animation: circle 10s infinite linear;
}
最后，通过 JavaScript 实现效果，这里使用 jQuery
let $img = $('.img')
let isPlaying = false
$img.on('click',function(){
!isPlaying ? running() : paused()
})
function running(){
$img.addClass('playing')
isPlaying = true
}
function paused(){
let siteImg = $img.css('transform') //获取当前元素的动画改变，transform的值
let siteWp = $('.wrap').css('transform')
$('.wrap').css('transform',siteWp === 'none' ? siteImg : siteImg.concat('',siteWp))
//由于父元素没有动画，所以每次赋值的时候，需要将上次父元素的状态加上
$img.removeClass('playing')
isPlaying = false
}
