MDN
监听css动画，开始，迭代次数，结束，中断
回调函数返回 animationEvent属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.a {
width: 100px;
height: 100px;
background: red;
animation: test 2.5s cubic-bezier(0.38, 0.88, 0.88, 1.37) 0s 2 alternate;
}
@keyframes test {
0% {
transform: rotate(0deg);
}
50%, 60%{
transform: rotate(120deg);
}
100% {
transform: rotate(30deg);
}
}
</style>
</head>
<body>
<div class="a"></div>
<script>
var target = document.querySelector('.a');
target.addEventListener('animationcancel', AnimationEvent=>{
// CSS Animation属性意外中断时派发出来
console.log( `animation cancel`);
});
target.addEventListener('animationstart', AnimationEvent=>{
// CSS Animation开始
console.log( `animation start`);
console.log( AnimationEvent);
});
target.addEventListener("animationiteration", AnimationEvent=>{
// 监听 iteration-cont
console.log('animation iteration')
});
target.addEventListener('animationend', AnimationEvent=>{
// CSS Animation结束
// css 意外的中断不会触发 end
console.log( `animation end`);
});
</script>
</body>
</html>