css3的animation动画结束事件与兼容性写法，transition结束事件类似

最新推荐文章于 2025-01-08 08:16:29 发布

原创最新推荐文章于 2025-01-08 08:16:29 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css动画

本文介绍了一种使用jQuery实现CSS3动画和过渡效果的方法，并提供了兼容多种浏览器的回调函数示例代码。同时，还展示了如何定义动画的CSS样式，包括不同阶段背景图片的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好几次用了，不好找，这次总结下来以后就方便了

//  Animation结束回调函数,兼容写法
$('.btn').addClass('animate-bg').on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd",function(){
		console.log(1)
 });

//  transition结束回调函数,兼容写法
    	$('.btn').addClass('animate-bg').on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
		        console.log(1)
	});

对了，还有动画css写法，一起留着吧，有用！

        .animate-bg{
    		-webkit-animation:ani-bg 1.2s;
    	    	-moz-animation:ani-bg 1.2s;
    		animation: ani-bg 1.2s;
    		background: url(img/1.png) no-repeat;
			background-size:100% 100%;
    	}
    	@keyframes ani-bg{
    		0%{
    			opacity: 1;
    			background: url(img/1.png) no-repeat;
    			background-size:100% 100%;
    		}
    		25%{
    			background: url(img/2.png) no-repeat;
    			background-size:100% 100%;
    		}
    		50%{
    			background: url(img/3.png) no-repeat;
    			background-size:100% 100%;
    		}
    		75%{
    			background: url(img/4.png) no-repeat;
    			background-size:100% 100%;
    		}
    		100%{
    			opacity: 0.5;
    			background: url(img/1.png) no-repeat;
    			background-size:100% 100%;
    		}
    	}