編碼的世界 / 優質文選 / 生涯
css3 事件觸發動畫 可重複播放
2022年7月02日
-
css3定義的動畫默認只播放一次，之後重新綁定到節點也無效，無法按期望由事件觸發，重新播放。
解決方案：設置動畫無限循環播放，初始狀態設為暫停，監聽到事件後修改狀態為播放，監聽循環播放事件時修改狀態為暫停。以下代碼只在chrome測試通過。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
div
{
width:100px;
height:100px;
background:red;
/* infinite 無限循環 */
-webkit-animation:myfirst 2s infinite paused;
}
@-webkit-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
<script>
$("div").on("mouseenter", function() {
this.style.webkitAnimationPlayState = "running";
});
//重複播放事件
$("div").on('webkitAnimationIteration', function() {
this.style.webkitAnimationPlayState = "paused";
});
</script>
</body>
</html>熱門文章
