jq控制css3动画暂停和播放

参考大佬：https://www.jb51.cc/jquery/176640.html

 

css3写的动画，无限循环，jq点击暂停或开始

html：

<div class="music">
   <img src="img/music.png" alt="">
</div>

css3：

.music{
    animation: circle 5s linear infinite;
    animation-play-state: running;
}
@keyframes  circle{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

jq：

$(".music").click(function (){
    if(condition...){
        $(this).css("animation-play-state",'running');
   }else{
        $(this).css("animation-play-state",'paused');
   }
})