css3 transition effect(其它效果)

http://blog.csdn.net/jerryvon/article/details/8755548

整理了一些其它动画，用的模板为flip模板，只不过CSS3不同

[css] view plaincopyprint?

1. /***************** 淡入淡出 ********************/
2. .effect5 .back {
3. -webkit-transform: rotate3d(1,0,0,0);
4. }
5. .effect5.show .front{
6. -webkit-animation: effect5Front 0.6s linear forwards;
7. }
8. @-webkit-keyframes effect5Front{
9. 0% { opacity: 1; }
10. 100% { opacity: 0; }
11. }
12. /***************** 向左边推入 ********************/
13. .transition.effect6 { overflow: hidden; }
14. .effect6.show .front,
15. .effect6.show .back{
16. -webkit-animation-duration: 0.4s;
17. -webkit-animation-timing-function: ease-out;
18. -webkit-animation-fill-mode: forwards;
19. }
20. .effect6.show .front{
21. -webkit-animation-name: effect6Front;
22. }
23. .effect6.show .back {
24. -webkit-animation-name: effect6Back;
25. }
26. @-webkit-keyframes effect6Front{
27. 0% { -webkit-transform: translateX(0); }
28. 100% { -webkit-transform: translateX(-100%); }
29. }
30. @-webkit-keyframes effect6Back{
31. 0% { -webkit-transform: translateX(100%); }
32. 100% { -webkit-transform: translateX(0px); }
33. }
34. /***************** 从某个角落盖上原来的图片 ********************/
35. .effect7 .front{ z-index: 1; }
36. .effect7 .back{ z-index: 2; }
37. .effect7.show .back{
38. -webkit-animation: effect7Back 0.4s ease-out forwards;
39. }
40. @-webkit-keyframes effect7Back{
41. 0% { -webkit-transform: rotate(40deg) scale(1.5) translate(200px,10px); opacity: 0; }
42. 100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
43. }
44. /***************** 插扑克牌效果1 ********************/
45. .effect8 .back {
46. -webkit-transform: rotate3d(1,0,0,0);
47. }
48. .effect8 .front {
49. z-index: 1;
50. }
51. .effect8 .back {
52. z-index: 1;
53. }
54. .effect8.show .front{
55. -webkit-animation: effect8Front 0.8s ease-in-out forwards;
56. }
57. @-webkit-keyframes effect8Front{
58. 0% { -webkit-transform: translateX(0); z-index: 3;}
59. 50% { -webkit-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
60. 51% { z-index: 1;}
61. 100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
62. }
63. /***************** 插扑克牌效果2 ********************/
64. .effect9 .back {
65. -webkit-transform: rotate3d(1,0,0,0);
66. }
67. .effect9.show .front,
68. .effect9.show .back{
69. -webkit-animation-duration: 0.8s;
70. -webkit-animation-timing-function: ease-in-out;
71. -webkit-animation-fill-mode: forwards;
72. -webkit-transform-origin: 0% 100%;
73. }
74. .effect9.show .front{
75. -webkit-animation-name: effect9Front;
76. }
77. .effect9.show .back {
78. -webkit-animation-name: effect9Back;
79. }
80. @-webkit-keyframes effect9Front{
81. 0% { z-index: 3;}
82. 50% { -webkit-transform: rotateZ(-75deg); z-index: 3;}
83. 51% { z-index: 1;}
84. 100% { -webkit-transform: rotateZ(0deg); z-index: 1;}
85. }
86. @-webkit-keyframes effect9Back{
87. 0% { z-index: 1;}
88. 50% { -webkit-transform: rotateZ(20deg); z-index: 1;}
89. 51% { z-index: 3;}
90. 100% { -webkit-transform: rotateZ(0deg); z-index: 3;}
91. }
92. /***************** 淡出效果2 ********************/
93. .effect10 .back {
94. -webkit-transform: rotate3d(1,0,0,0);
95. }
96. .effect10.show .front{
97. -webkit-animation: effect10Front 0.4s ease-in-out forwards;
98. }
99. @-webkit-keyframes effect10Front{
100. 0% { opacity:1; }
101. 100% { -webkit-transform: rotateZ(3deg) scale(1.5); opacity:0; }
102. }
103. /***************** effect11 ********************/
104. .effect11 .back {
105. -webkit-transform: rotate3d(1,0,0,0);
106. }
107. .effect11.show .front{
108. -webkit-transform-origin: 0% 100%;
109. }
110. .effect11.show .front{
111. -webkit-animation: effect11Front 1s ease-in-out forwards;
112. }
113. @-webkit-keyframes effect11Front{
114. 0% { z-index: 3; -webkit-animation-timing-function : ease-in }
115. 20% { -webkit-transform: rotateZ(180deg); z-index: 3;-webkit-animation-timing-function : ease-out }
116. 21% { z-index: 1; }
117. 40% { -webkit-transform: rotateZ(370deg); z-index: 1; }
118. 60% { -webkit-transform: rotateZ(356deg); z-index: 1; }
119. 80% { -webkit-transform: rotateZ(360deg); z-index: 1; }
120. 95% { -webkit-transform: rotateZ(359deg); z-index: 1; }
121. 100% { -webkit-transform: rotateZ(360deg); z-index: 1; }
122. }
123. /***************** 中心点扩散显示(mask) ********************/
124. .effect12 .back{
125. -webkit-transform: rotate3d(1,0,0,0);
126. }
127. .effect12 .back {
128. -webkit-mask-image: url(../../assets/circle-mask.png);
129. -webkit-mask-repeat: no-repeat;
130. -webkit-mask-position: 50% 50%;
131. -webkit-mask-size: 1500px;
132. -webkit-animation-duration: 1s;
133. }
134. .effect12.show .back{
135. -webkit-animation-name: iris;
136. z-index:3;
137. }
138. @-webkit-keyframes iris {
139. 0% { -webkit-mask-size: 0; -webkit-animation-timing-function: ease-in-out; }
140. 100% { -webkit-mask-size: 1500px; }
141. }