jq控制css3动画暂停和播放

it2024-12-01  10

参考大佬: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'); } })

 

最新回复(0)