HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。
（注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）
下面做了个过渡动画汇总，包含常见的动画效果，效果图如下：
点击此处查看运行效果。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5-页面切换动画</title>
<link href="animations.css" rel="stylesheet">
<script src="modernizr.custom.js"></script>
<script src="jquery-1.8.0.min.js"></script>
<style> #viewsWrapper { top:0px; left:0px; width:300px; height:200px; position:relative; overflow: hidden; } #view1 { background:#dddd00; } #view2 { background:#ff00ff; } #view3 { background:#cc00ff; } #view4 { background:#00cccc; } .pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .pt-page-current, .no-js .pt-page { visibility: visible; z-index: 1; } </style>
<script> //当前页面移动完毕 var endCurrPage = false; //后续页面移动完毕 var endNextPage = false; //入场动画和出场动画 var outClass = ''; var inClass = ''; var animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, // animation end event name animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] $(function() { //保存各个View的默认class $(".pt-page").each( function() { var $page = $( this ); $page.data( 'originalClassList', $page.attr( 'class' ) ); } ); //设置默认页面 $(".pt-page").eq(0).addClass( 'pt-page-current' ); //添加动画样式单选框 var str = ""; for(var i=1;i<=67;i++){ str += '<input type="radio" name="myAnimation" value="'+i+'" />效果'+i; if(i%7==0){ str += "<br/>"; } } $("#radiosDiv").html(str); }); //View切换 function changeView(newView){ //设置动画效果 var animationType = $('input:radio[name="myAnimation"]:checked:eq(0)').val(); getAnimationClass(parseInt(animationType)); $currPage = $(".pt-page-current").eq(0); $nextPage = $(newView); //清除原来添加的动画，层级等样式 //(正常动画结束时会自动清除，这样做防止用户在动画结束前就点击切换其他的) $(".pt-page").each( function() { $(this).attr( 'class', $(this).data( 'originalClassList' ) ); }); $currPage.addClass("pt-page-current"); $nextPage.addClass("pt-page-current"); //如果就是当页则不切换 if($currPage.attr("id") == $nextPage.attr("id")){ return; } //新页面入场 $currPage.addClass(outClass).on( animEndEventName, function() { $currPage.off( animEndEventName ); endCurrPage = true; if( endNextPage ) { onEndAnimation( $currPage, $nextPage ); } } ); //旧页面出场 $nextPage.addClass(inClass).on( animEndEventName, function() { $nextPage.off( animEndEventName ); endNextPage = true; if( endCurrPage ) { onEndAnimation( $currPage, $nextPage ); } } ); } //所有动画都结束后 function onEndAnimation( $outpage, $inpage ) { endCurrPage = false; endNextPage = false; //resetPage( $outpage, $inpage ); //isAnimating = false; $outpage.attr( 'class', $outpage.data( 'originalClassList' ) ); $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' ); } function getAnimationClass(animationType) { switch(animationType) { case 1: outClass = 'pt-page-moveToLeft'; inClass = 'pt-page-moveFromRight'; break; case 2: outClass = 'pt-page-moveToRight'; inClass = 'pt-page-moveFromLeft'; break; case 3: outClass = 'pt-page-moveToTop'; inClass = 'pt-page-moveFromBottom'; break; case 4: outClass = 'pt-page-moveToBottom'; inClass = 'pt-page-moveFromTop'; break; case 5: outClass = 'pt-page-fade'; inClass = 'pt-page-moveFromRight pt-page-ontop'; break; case 6: outClass = 'pt-page-fade'; inClass = 'pt-page-moveFromLeft pt-page-ontop'; break; case 7: outClass = 'pt-page-fade'; inClass = 'pt-page-moveFromBottom pt-page-ontop'; break; case 8: outClass = 'pt-page-fade'; inClass = 'pt-page-moveFromTop pt-page-ontop'; break; case 9: outClass = 'pt-page-moveToLeftFade'; inClass = 'pt-page-moveFromRightFade'; break; case 10: outClass = 'pt-page-moveToRightFade'; inClass = 'pt-page-moveFromLeftFade'; break; case 11: outClass = 'pt-page-moveToTopFade'; inClass = 'pt-page-moveFromBottomFade'; break; case 12: outClass = 'pt-page-moveToBottomFade'; inClass = 'pt-page-moveFromTopFade'; break; case 13: outClass = 'pt-page-moveToLeftEasing pt-page-ontop'; inClass = 'pt-page-moveFromRight'; break; case 14: outClass = 'pt-page-moveToRightEasing pt-page-ontop'; inClass = 'pt-page-moveFromLeft'; break; case 15: outClass = 'pt-page-moveToTopEasing pt-page-ontop'; inClass = 'pt-page-moveFromBottom'; break; case 16: outClass = 'pt-page-moveToBottomEasing pt-page-ontop'; inClass = 'pt-page-moveFromTop'; break; case 17: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromRight pt-page-ontop'; break; case 18: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromLeft pt-page-ontop'; break; case 19: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromBottom pt-page-ontop'; break; case 20: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromTop pt-page-ontop'; break; case 21: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-scaleUpDown pt-page-delay300'; break; case 22: outClass = 'pt-page-scaleDownUp'; inClass = 'pt-page-scaleUp pt-page-delay300'; break; case 23: outClass = 'pt-page-moveToLeft pt-page-ontop'; inClass = 'pt-page-scaleUp'; break; case 24: outClass = 'pt-page-moveToRight pt-page-ontop'; inClass = 'pt-page-scaleUp'; break; case 25: outClass = 'pt-page-moveToTop pt-page-ontop'; inClass = 'pt-page-scaleUp'; break; case 26: outClass = 'pt-page-moveToBottom pt-page-ontop'; inClass = 'pt-page-scaleUp'; break; case 27: outClass = 'pt-page-scaleDownCenter'; inClass = 'pt-page-scaleUpCenter pt-page-delay400'; break; case 28: outClass = 'pt-page-rotateRightSideFirst'; inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop'; break; case 29: outClass = 'pt-page-rotateLeftSideFirst'; inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop'; break; case 30: outClass = 'pt-page-rotateTopSideFirst'; inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop'; break; case 31: outClass = 'pt-page-rotateBottomSideFirst'; inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop'; break; case 32: outClass = 'pt-page-flipOutRight'; inClass = 'pt-page-flipInLeft pt-page-delay500'; break; case 33: outClass = 'pt-page-flipOutLeft'; inClass = 'pt-page-flipInRight pt-page-delay500'; break; case 34: outClass = 'pt-page-flipOutTop'; inClass = 'pt-page-flipInBottom pt-page-delay500'; break; case 35: outClass = 'pt-page-flipOutBottom'; inClass = 'pt-page-flipInTop pt-page-delay500'; break; case 36: outClass = 'pt-page-rotateFall pt-page-ontop'; inClass = 'pt-page-scaleUp'; break; case 37: outClass = 'pt-page-rotateOutNewspaper'; inClass = 'pt-page-rotateInNewspaper pt-page-delay500'; break; case 38: outClass = 'pt-page-rotatePushLeft'; inClass = 'pt-page-moveFromRight'; break; case 39: outClass = 'pt-page-rotatePushRight'; inClass = 'pt-page-moveFromLeft'; break; case 40: outClass = 'pt-page-rotatePushTop'; inClass = 'pt-page-moveFromBottom'; break; case 41: outClass = 'pt-page-rotatePushBottom'; inClass = 'pt-page-moveFromTop'; break; case 42: outClass = 'pt-page-rotatePushLeft'; inClass = 'pt-page-rotatePullRight pt-page-delay180'; break; case 43: outClass = 'pt-page-rotatePushRight'; inClass = 'pt-page-rotatePullLeft pt-page-delay180'; break; case 44: outClass = 'pt-page-rotatePushTop'; inClass = 'pt-page-rotatePullBottom pt-page-delay180'; break; case 45: outClass = 'pt-page-rotatePushBottom'; inClass = 'pt-page-rotatePullTop pt-page-delay180'; break; case 46: outClass = 'pt-page-rotateFoldLeft'; inClass = 'pt-page-moveFromRightFade'; break; case 47: outClass = 'pt-page-rotateFoldRight'; inClass = 'pt-page-moveFromLeftFade'; break; case 48: outClass = 'pt-page-rotateFoldTop'; inClass = 'pt-page-moveFromBottomFade'; break; case 49: outClass = 'pt-page-rotateFoldBottom'; inClass = 'pt-page-moveFromTopFade'; break; case 50: outClass = 'pt-page-moveToRightFade'; inClass = 'pt-page-rotateUnfoldLeft'; break; case 51: outClass = 'pt-page-moveToLeftFade'; inClass = 'pt-page-rotateUnfoldRight'; break; case 52: outClass = 'pt-page-moveToBottomFade'; inClass = 'pt-page-rotateUnfoldTop'; break; case 53: outClass = 'pt-page-moveToTopFade'; inClass = 'pt-page-rotateUnfoldBottom'; break; case 54: outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop'; inClass = 'pt-page-rotateRoomLeftIn'; break; case 55: outClass = 'pt-page-rotateRoomRightOut pt-page-ontop'; inClass = 'pt-page-rotateRoomRightIn'; break; case 56: outClass = 'pt-page-rotateRoomTopOut pt-page-ontop'; inClass = 'pt-page-rotateRoomTopIn'; break; case 57: outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop'; inClass = 'pt-page-rotateRoomBottomIn'; break; case 58: outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop'; inClass = 'pt-page-rotateCubeLeftIn'; break; case 59: outClass = 'pt-page-rotateCubeRightOut pt-page-ontop'; inClass = 'pt-page-rotateCubeRightIn'; break; case 60: outClass = 'pt-page-rotateCubeTopOut pt-page-ontop'; inClass = 'pt-page-rotateCubeTopIn'; break; case 61: outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop'; inClass = 'pt-page-rotateCubeBottomIn'; break; case 62: outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop'; inClass = 'pt-page-rotateCarouselLeftIn'; break; case 63: outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop'; inClass = 'pt-page-rotateCarouselRightIn'; break; case 64: outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop'; inClass = 'pt-page-rotateCarouselTopIn'; break; case 65: outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop'; inClass = 'pt-page-rotateCarouselBottomIn'; break; case 66: outClass = 'pt-page-rotateSidesOut'; inClass = 'pt-page-rotateSidesIn pt-page-delay200'; break; case 67: outClass = 'pt-page-rotateSlideOut'; inClass = 'pt-page-rotateSlideIn'; break; } } </script>
</head>
<body>
<div id="viewsWrapper">
<div id="view1" class="pt-page">这个是页面1......</div>
<div id="view2" class="pt-page">这个是页面2......</div>
<div id="view3" class="pt-page">这个是页面3......</div>
<div id="view4" class="pt-page">这个是页面4......</div>
</div>
<br/>
<input type="button" onclick="changeView('#view1')" value="切换页面1"/>
<input type="button" onclick="changeView('#view2')" value="切换页面2"/>
<input type="button" onclick="changeView('#view3')" value="切换页面3"/>
<input type="button" onclick="changeView('#view4')" value="切换页面4"/>
<br/>
<br/>
<div id="radiosDiv"></div>
</body>
</html>源码下载：场景切换.zip
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_829.html