jQuery CSS3动画过渡效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery CSS3动画过渡效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery CSS3动画过渡效果特效</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/zzsc.css" />
</head>
<body>

<div class="container clearfix" role="main">
	<button class="button-animation">动画效果</button>
	<button class="button-transition">过渡效果</button>
</div>

<script src="js/jquery-v1.min.js"></script>
<script>

'use strict';


// helper functions

;( function( $, window, document, undefined )
{
	var s = document.body || document.documentElement, s = s.style, prefixAnimation = '', prefixTransition = '';

	if( s.WebkitAnimation == '' )	prefixAnimation	 = '-webkit-';
	if( s.MozAnimation == '' )		prefixAnimation	 = '-moz-';
	if( s.OAnimation == '' )		prefixAnimation	 = '-o-';

	if( s.WebkitTransition == '' )	prefixTransition = '-webkit-';
	if( s.MozTransition == '' )		prefixTransition = '-moz-';
	if( s.OTransition == '' )		prefixTransition = '-o-';

	$.fn.extend(
	{
		onCSSAnimationEnd: function( callback )
		{
			var $this = $( this ).eq( 0 );
			$this.one( 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', callback );
			if( ( prefixAnimation == '' && !( 'animation' in s ) ) || $this.css( prefixAnimation + 'animation-duration' ) == '0s' ) callback();
			return this;
		},
		onCSSTransitionEnd: function( callback )
		{
			var $this = $( this ).eq( 0 );
			$this.one( 'webkitTransitionEnd mozTransitionEnd oTransitionEnd otransitionend transitionend', callback );
			if( ( prefixTransition == '' && !( 'transition' in s ) ) || $this.css( prefixTransition + 'transition-duration' ) == '0s' ) callback();
			return this;
		}
	});
})( jQuery, window, document );


// test: animation

;( function( $, window, document, undefined )
{
	var $button = $( '.button-animation' );
	$button.on( 'click', function( e )
	{
		e.preventDefault();
		$button.addClass( 'do-it' ).onCSSAnimationEnd( function()
		{
			alert( 'CSS动画已经完成！' );
			$button.removeClass( 'do-it' );
		});
	});
})( jQuery, window, document );


// test: transition

;( function( $, window, document, undefined )
{
	var $button = $( '.button-transition' );
	$button.on( 'click', function( e )
	{
		e.preventDefault();
		$button.addClass( 'do-it' ).onCSSTransitionEnd( function()
		{
			alert( 'CSS转换已完成！' );
			$button.removeClass( 'do-it' );
		});
	});
})( jQuery, window, document );

</script>
</body>
</html>

CSS代码(zzsc.css):

*,h1,/* see normalize.css */
figure /* see normalize.css */
{font-size:100%;font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;vertical-align:baseline;border:0;padding:0;margin:0;}
html{}
body{font-family:Roboto,sans-serif;padding:5rem 1.25rem;/* 80 20 */
}
.container{width:100%;max-width:640px;/* 960 */
text-align:center;margin:0 auto;}
.container h1{font-size:42px;font-weight:300;margin-bottom:40px;}
.container h1 a:hover,.container h1 a:focus{color:#c92020;}
.container button{width:48%;height:200px;color:#fff;box-shadow:0 2px 6px rgba( 0,0,0,.3 );}
.container button:hover,.container button:focus{box-shadow:0 6px 20px rgba( 0,0,0,.4 );}
.button-animation{background-color:#ff9900;float:left;}
.button-transition{background-color:#3299bb;float:right;}
.button-animation.do-it{color:transparent;-webkit-animation:animate-it 2s;animation:animate-it 2s;}
@-webkit-keyframes animate-it{from{-webkit-transform:scale( 1 );}
25%{-webkit-transform:scale( 2 );}
44%{-webkit-transform:scale( 2 ) rotate( 0 );}
46%{-webkit-transform:scale( 2 ) rotate( 10deg );}
50%{-webkit-transform:scale( 2 ) rotate( -10deg );}
54%{-webkit-transform:scale( 2 ) rotate( 10deg );}
58%{-webkit-transform:scale( 2 ) rotate( -10deg );}
62%{-webkit-transform:scale( 2 ) rotate( 10deg );}
64%{-webkit-transform:scale( 2 ) rotate( 0 );}
75%{-webkit-transform:scale( 2 );}
to{-webkit-transform:scale( 0 );}
}
@keyframes animate-it{from{transform:scale( 1 );}
25%{transform:scale( 2 );}
44%{transform:scale( 2 ) rotate( 0 );}
46%{transform:scale( 2 ) rotate( 10deg );}
50%{transform:scale( 2 ) rotate( -10deg );}
54%{transform:scale( 2 ) rotate( 10deg );}
58%{transform:scale( 2 ) rotate( -10deg );}
62%{transform:scale( 2 ) rotate( 10deg );}
64%{transform:scale( 2 ) rotate( 0 );}
75%{transform:scale( 2 );}
to{transform:scale( 0 );}
}
.button-transition.do-it{opacity:0;-webkit-transition:opacity 2s;transition:opacity 2s;}

附件:下载该文件资源,减少时间成本(增值服务)