CSS3动画中的transform: rotate遇到IOS浏览器不支持animation-play-state属性解决方法

在做音乐播放器CD唱片背景图旋转时遇到一个坑，就是animation-play-state属性在IOS浏览器下（safari、微信内置浏览器、IOS版chrome），当其对应的动画中有transform: rotate属性时，animation-play-state属性是无效的。下面两个简单例子大家可以在IOS浏览器中简单验证下：
当 @keyframes有transform: rotate属性时，点击pause按钮，动画不会暂停：
http://output.jsbin.com/yuwobiv/1

    
    
      
    



    

    running
    pause
    

当无transform: rotate属性且只是简单的top、left等位移时，点击pause按钮，动画会暂停：http://jsbin.com/towaqat/1

    
    
      
    



    

    running
    pause
    

因此为了兼容性，我在做CD背景图旋转时，是按照歌曲时间进度换算成对应的角度（比如我的背景图旋转一个周期是20s，那么我可以写个函数将歌曲时间进度转换成CD背景图对应的角度。），当暂停时（暂停时，取消动画，播放时重新生成动画），获取当前歌曲的时间进度，然后通过前述的函数换算出对应的角度，然后只需将包裹CD背景图的父容器旋转下相应角度即可。这样，点击开始播放时，CD会在原来的角度基础上继续旋转从而达到了暂停的效果。具体可见：https://github.com/have-not-BUG/vue-music/commit/f10e33e623ef27457fcf4c0ee88d2d1a60d7ce7c

*本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!