以下是一个简单的例子，演示如何使用 animationstart 事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes exampleAnimation {
from { background-color: red; }
to { background-color: yellow; }
}
.animated-div {
width: 100px;
height: 100px;
background-color: red;
animation: exampleAnimation 2s infinite alternate;
}
</style>
</head>
<body>
<div class="animated-div" id="myDiv"></div>
<script>
// 获取元素
var animatedDiv = document.getElementById("myDiv");
// 添加 animationstart 事件监听器
animatedDiv.addEventListener("animationstart", function(event) {
console.log("动画开始啦！");
console.log("动画名称：" + event.animationName);
console.log("动画时长：" + event.elapsedTime + "秒");
});
</script>
</body>
</html>
在这个例子中，我们创建了一个简单的 CSS 动画，当页面加载后，animationstart 事件监听器会在动画开始时触发，控制台将打印相关信息，包括动画名称和动画时长。
要点总结：
- animationstart 事件会在 CSS 动画开始时触发。
- 可以使用 addEventListener 方法来为元素添加 animationstart 事件的监听器。
- 事件对象 event 提供了关于动画的一些信息，比如动画名称（event.animationName）和动画的经过时间（event.elapsedTime）。
请注意，CSS 动画需要在支持的浏览器中运行。
转载请注明出处：http://www.zyzy.cn/article/detail/6247/JavaScript 和 HTML DOM