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的css代码放到图标的css里即可

示例:

.audio_icon {

    background: url(../img/kv/audio.png?v=1.0.0)no-repeat center/100% 100%;

    -webkit-animation: audio_icon 2s linear infinite;

    animation: audio_icon 2s linear infinite;

}

.toggleAudioAni {

  animation-play-state: paused !important;

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

}