height5db79b134e9f6b82c0b36e0489ee08ed: 1.5;>当css3的animation完成一个动画，我们想让动画保持在终止的状态或其他一些事件，要怎么做呢？
我们可以监听 webkitanimationend 事件就可以
// 动画结束时事件o.addeventlistener("webkitanimationend", function() {
console.log("动画结束");
})
-webkit-animation动画有三个事件：
开始事件: webkitanimationstart
结束事件: webkitanimationend
重复运动事件: webkitanimationiteration
// 动画开始时事件o.addeventlistener("webkitanimationstart", function() {
console.log("动画开始");
})// 动画重复运动时事件o.addeventlistener("webkitanimationiteration", function() {
console.log("动画重复运动");
})// 动画结束时事件o.addeventlistener("webkitanimationend", function() {
console.log("动画结束");
})
示例：
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"><title>webkitanimationend</title><style type="text/css">#p1{
margin: 200px auto 0;
width: 200px;
height: 200px;
color: #fff;
background-color: #000;
-webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform {
0%{
-webkit-transform: scale(1) rotate(50deg);
}
30%{
-webkit-transform: scale(2) rotate(100deg);
}
6%{
-webkit-transform: scale(0.5) rotate(-100deg);
}
100%{
-webkit-transform: scale(1) rotate(0);
}}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getelementbyid("p1");// 动画开始时事件o.addeventlistener("webkitanimationstart", function() {
alert("动画开始");
})// 动画重复运动时事件o.addeventlistener("webkitanimationiteration", function() {
alert("动画重复运动");
})// 动画结束时事件o.addeventlistener("webkitanimationend", function() { this.classname = "";
alert("动画结束");
})</script></body></html>
css3的过渡属性transition，在动画结束时，也存在结束的事件：webkittransitionend
注意：transition 仅有这一个事件
【相关推荐】
1. 详细介绍css3中animation-direction属性
2. 必须掌握的css3动画（animation）的8大属性
3. 利用animation属性实现循环间的延时执行实例教程
4. 详解css3中两种暂停方式（transition、animation）
以上就是分享一个监听css3动画（animation）结束事件实例的详细内容。