当前位置:Gxlcms > css > 分享一个监听css3动画(animation)结束事件实例

分享一个监听css3动画(animation)结束事件实例

时间:2021-07-01 10:21:17 帮助过:35人阅读

当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)结束事件实例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行