css 入场动画_HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）...

1

2

3

4

5

HTML5-页面切换动画

6

7

8

9

10 #viewsWrapper{

11 top:0px;

12 left:0px;

13 width:300px;

14 height:200px;

15 position:relative;

16 overflow:hidden;

17 }

18

19 #view1{

20 background:#dddd00;

21 }

22

23 #view2{

24 background:#ff00ff;

25 }

26

27 #view3{

28 background:#cc00ff;

29 }

30

31 #view4{

32 background:#00cccc;

33 }

34

35 .pt-page{

36 width:100%;

37 height:100%;

38 position:absolute;

39 top:0;

40 left:0;

41 visibility:hidden;

42 overflow:hidden;

43 -webkit-backface-visibility:hidden;

44 -moz-backface-visibility:hidden;

45 backface-visibility:hidden;

46 -webkit-transform:translate3d(0, 0, 0);

47 -moz-transform:translate3d(0, 0, 0);

48 transform:translate3d(0, 0, 0);

49 -webkit-transform-style:preserve-3d;

50 -moz-transform-style:preserve-3d;

51 transform-style:preserve-3d;

52 }

53 .pt-page-current,54 .no-js .pt-page{

55 visibility:visible;

56 z-index:1;

57 }

58

59

60 //当前页面移动完毕

61 varendCurrPage= false;62 //后续页面移动完毕

63 varendNextPage= false;64 //入场动画和出场动画

65 varoutClass= '';66 varinClass= '';67

68 varanimEndEventNames={69 'WebkitAnimation':'webkitAnimationEnd',70 'OAnimation':'oAnimationEnd',71 'msAnimation':'MSAnimationEnd',72 'animation':'animationend'

73 },74 //animation end event name

75 animEndEventName=animEndEventNames[ Modernizr.prefixed('animation') ]76

77 $(function() {78 //保存各个View的默认class

79 $(".pt-page").each(function() {80 var$page=$(this);81 $page.data('originalClassList', $page.attr('class') );82 } );83 //设置默认页面

84 $(".pt-page").eq(0).addClass('pt-page-current');85

86 //添加动画样式单选框

87 varstr= "";88 for(vari=1;i<=67;i++){89 str+= '效果'+i;90 if(i%7==0){91 str+= "
";92 }93 }94 $("#radiosDiv").html(str);95 });96

97 //View切换

98 functionchangeView(newView){99 //设置动画效果