CSS音乐播放 图标旋转 暂停保持角度

音乐播放：

HTML部分：

<div id="audio_btn" class="rotate">
    <audio loop src="" id="media" autoplay="" preload=""></audio>
</div>

CSS部分：

#audio_btn{
    width: 70px;
    height: 70px;
    top: 25px;
    right: 35px;
    position: absolute;

    background-image: url(../imgs/music.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.rotate {
    -webkit-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;

    animation-play-state:running;
    -webkit-animation-play-state:running; /* Safari 和 Chrome */
}

点击时暂停 jq给图标添加这个样式：
animation-play-state:有兼容性问题

.rotate-pause {
    animation-play-state:paused;
    -webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

旋转动画，keyframe：

@-webkit-keyframes rotating {
    from { -webkit-transform: rotate(0) }
    to { -webkit-transform: rotate(360deg) }
}

@keyframes rotating {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
    from { -moz-transform: rotate(0) }
    to { -moz-transform: rotate(360deg) }
}

JS部分：

var x = document.getElementById("media"); 
$('#audio_btn').on('click', function() {

    $(this).toggleClass("rotate-pause"); 
    if($(this).hasClass("rotate")){
        x.play();
    }else{
        x.pause();
    }
});