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 nameanimEndEventName = 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>