CSS3 Transition effect (other effects)

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

Organized some other animations, using templates for the flip template, but CSS3 different

[CSS]View Plaincopyprint?

2. /***************** fade-in Fade ********************/
4. . Effect5. Back {
6. -webkit-transform:rotate3d (1,0,0,0);
8. }
10. . Effect5. Show. front{
12. -webkit-animation:effect5Front 0.6s linear forwards;
14. }
16. @-webkit-keyframes effect5front{
18. 0% {opacity: 1;}
20. 100% {opacity: 0;}
22. }
24. /***************** to the left and push into the ********************/.
26. . transition.effect6 { overflow: hidden;}
28. . Effect6. Show. Front,
30. . Effect6. Show. back{
32. -webkit-animation-duration: 0.4s;
34. -webkit-animation-timing-function:ease-out;
36. -webkit-animation-fill-mode:forwards;
38. }
40. . Effect6. Show. front{
42. -webkit-animation-name:effect6Front;
44. }
46. . Effect6. Show. Back {
48. -webkit-animation-name:effect6Back;
50. }
52. @-webkit-keyframes effect6front{
54. 0% {-webkit-transform:translatex (0);}
56. 100% {-webkit-transform:translatex (-100%);}
58. }
60. @-webkit-keyframes effect6back{
62. 0% {-webkit-transform:translatex (100%);}
64. 100% {-webkit-transform:translatex (0px);}
66. }
68. /***************** from a corner to cover the original picture ********************/
70. . Effect7. front{ Z-index: 1;}
72. . Effect7. back{ Z-index: 2;}
74. . Effect7. Show. back{
76. -webkit-animation:effect7Back 0.4s ease-out forwards;
78. }
80. @-webkit-keyframes effect7back{
82. 0% {-webkit-transform:rotate (40deg) scale (1.5) Translate (200px,10px); opacity: 0;}
84. 100% {-webkit-transform:rotate (0deg) scale (1) Translate (0,0); opacity: 1;}
86. }
88. /***************** Card effect 1 ********************/
90. . Effect8. Back {
92. -webkit-transform:rotate3d (1,0,0,0);
94. }
96. . Effect8. Front {
98. Z-index: 1;
100. }
102. . Effect8. Back {
104. Z-index: 1;
106. }
108. . Effect8. Show. front{
110. -webkit-animation:effect8Front 0.8s ease-in-out forwards;
112. }
114. @-webkit-keyframes effect8front{
116. 0% {-webkit-transform:translatex (0);  Z-index: 3;}
118. 50% {-webkit-transform:rotatez (-5deg) TranslateX (-339px);  Z-index: 3;}
120. 51% { z-index: 1;}
122. 100% {-webkit-transform:rotatez (0deg) TranslateX (0px);  Z-index: 1;}
124. }
126. /***************** Card Effect 2 ********************/
128. . Effect9. Back {
130. -webkit-transform:rotate3d (1,0,0,0);
132. }
134. . Effect9. Show. Front,
136. . Effect9. Show. back{
138. -webkit-animation-duration: 0.8s;
140. -webkit-animation-timing-function:ease-in-out;
142. -webkit-animation-fill-mode:forwards;
144. -webkit-transform-origin: 0% 100%;
146. }
148. . Effect9. Show. front{
150. -webkit-animation-name:effect9Front;
152. }
154. . Effect9. Show. Back {
156. -webkit-animation-name:effect9Back;
158. }
160. @-webkit-keyframes effect9front{
162. 0% { z-index: 3;}
164. 50% {-webkit-transform:rotatez (-75deg);  Z-index: 3;}
166. 51% { z-index: 1;}
168. 100% {-webkit-transform:rotatez (0deg);  Z-index: 1;}
170. }
172. @-webkit-keyframes effect9back{
174. 0% { z-index: 1;}
176. 50% {-webkit-transform:rotatez (20deg);  Z-index: 1;}
178. 51% { z-index: 3;}
180. 100% {-webkit-transform:rotatez (0deg);  Z-index: 3;}
182. }
184. /***************** fade out Effect 2 ********************/
186. . Effect. Back {
188. -webkit-transform:rotate3d (1,0,0,0);
190. }
192. . Effect. Show. front{
194. -webkit-animation:effect10Front 0.4s ease-in-out forwards;
196. }
198. @-webkit-keyframes effect10front{
200. 0% {opacity:1;}
202. 100% {-webkit-transform:rotatez (3deg) scale (1.5); opacity:0;}
204. }
206. /***************** effect11 ********************/
208. . Effect. Back {
210. -webkit-transform:rotate3d (1,0,0,0);
212. }
214. . Effect. Show. front{
216. -webkit-transform-origin: 0% 100%;
218. }
220. . Effect. Show. front{
222. -webkit-animation:effect11Front 1s ease-in-out forwards;
224. }
226. @-webkit-keyframes effect11front{
228. 0% { z-index: 3;-webkit-animation-timing-function:ease-in}
230. 20% {-webkit-transform:rotatez (180deg); z-index: 3;-webkit-animation-timing-function:ease-out}
232. 21% { z-index: 1;}
234. 40% {-webkit-transform:rotatez (370deg);  Z-index: 1;}
236. 60% {-webkit-transform:rotatez (356deg);  Z-index: 1;}
238. 80% {-webkit-transform:rotatez (360deg);  Z-index: 1;}
240. 95% {-webkit-transform:rotatez (359deg);  Z-index: 1;}
242. 100% {-webkit-transform:rotatez (360deg);  Z-index: 1;}
244. }
246. /***************** Center point Diffusion Display (mask) ********************/
248. . Effect.back{
250. -webkit-transform:rotate3d (1,0,0,0);
252. }
254. . Effect. Back{
256. -webkit-mask-image: url (... /..  /assets/circle-mask.png);
258. -webkit-mask-repeat: no-repeat;
260. -webkit-mask-Position: 50% 50%;
262. -webkit-mask-Size: 1500px;
264. -webkit-animation-duration: 1s;
266. }
268. . Effect. Show. back{
270. -webkit-animation-name:iris;
272. Z-index:3;
274. }
276. @-webkit-keyframes Iris {
278. 0% {-webkit-mask-size: 0;-webkit-animation-timing-function:ease-in-out;}
280. 100% {-webkit-mask-size: 1500px;}
282. }

CSS3 Transition effect (other effects)