CSS图片旋转/暂停后保持旋转状态(音乐播放常用)

项目场景：

通常h5项目中的音乐图标会有旋转动画,我们需要进行暂停播放,展示对应的旋转动画

---

问题描述

通常的做法,创建旋转动画,暂停的时候移除toggleAudioAni类名,达到暂停的效果,但是会存在一个问题,旋转角度会立马转到0,体验效果非常差

@-webkit-keyframes audio_icon {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.toggleAudioAni{
    -webkit-animation: audio_icon 2s linear infinite;
    animation: audio_icon 2s linear infinite;
}

---

原因分析：

移除类名后,动画会立即被移除,元素会重置到初始化的角度(0)

---

解决方案：

解决方案也很简单,我们只需把toggleAudioAni换成下列css代码

.toggleAudioAni {

  animation-play-state: paused !important;

  -webkit-animation-play-state: paused !important;

}

把之前toggleAudioAni的cs