(转)页面过度动画效果大集合

今天我们来分享一些创造性的页面过度效果，我们把各种页面过度动画效果放在一起，以便可以方便的查看这些有趣的和创造性的过度动画效果，当然有些是非常简单的，比如滑动，也有一些使用perspective和3D transform制作出有深度和动态感的效果。

查看演示  下载源码

说明：这只是为了展示一些有趣的动画效果和灵感。它并不是一个滑块或者类似滑块的东西。我们只是添加了一些class使其呈现出动态的过度效果，并不是为了导航。

浏览器支持：  IE10

我们使用下面的结构来展示不同的“页面”.

    <div id="pt-main" class="pt-perspective">
        <div class="pt-page pt-page-1">
            <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
        </div>
        <div class="pt-page pt-page-2"><!-- ... --></div>
        <!-- ... -->
    </div>

我们为perspective容器使用相对定位，并且给perspective属性赋值为1200px. 下面的这些样式是所有过度动画效果所需要的。

 1 .pt-perspective {
 2     position: relative;
 3     width: 100%;
 4     height: 100%;
 5     perspective: 1200px;
 6     transform-style: preserve-3d;
 7 }
 8  
 9 .pt-page {
10     width: 100%;
11     height: 100%;
12     position: absolute;
13     top: 0;
14     left: 0;
15     visibility: hidden;
16     overflow: hidden;
17     backface-visibility: hidden;
18     transform: translate3d(0, 0, 0);
19 }
20  
21 .pt-page-current,
22 .no-js .pt-page {
23     visibility: visible;
24 }
25  
26 .no-js body {
27     overflow: auto;
28 }
29  
30 .pt-page-ontop {
31     z-index: 999;
32 }

 

.pt-page-ontop类是为了用于一些特定的页面过度效果，我们会使一个页面在另外一个页面之上。

下面列出一个例子：向不同方向缩放页面，同时带有淡入或者淡出效果。

 1 /* scale and fade */
 2  
 3 .pt-page-scaleDown {
 4     animation: scaleDown .7s ease both;
 5 }
 6  
 7 .pt-page-scaleUp {
 8     animation: scaleUp .7s ease both;
 9 }
10  
11 .pt-page-scaleUpDown {
12     animation: scaleUpDown .5s ease both;
13 }
14  
15 .pt-page-scaleDownUp {
16     animation: scaleDownUp .5s ease both;
17 }
18  
19 .pt-page-scaleDownCenter {
20     animation: scaleDownCenter .4s ease-in both;
21 }
22  
23 .pt-page-scaleUpCenter {
24     animation: scaleUpCenter .4s ease-out both;
25 }
26  
27 /************ keyframes ************/
28  
29 /* scale and fade */
30  
31 @keyframes scaleDown {
32     to { opacity: 0; transform: scale(.8); }
33 }
34  
35 @keyframes scaleUp {
36     from { opacity: 0; transform: scale(.8); }
37 }
38  
39 @keyframes scaleUpDown {
40     from { opacity: 0; transform: scale(1.2); }
41 }
42  
43 @keyframes scaleDownUp {
44     to { opacity: 0; transform: scale(1.2); }
45 }
46  
47 @keyframes scaleDownCenter {
48     to { opacity: 0; transform: scale(.7); }
49 }
50  
51 @keyframes scaleUpCenter {
52     from { opacity: 0; transform: scale(.7); }
53 }

 

为了说明演示是如何工作的，请看下面的一些js片段，当然你也可以下载源码后找到全部的代码。

 1 //...
 2  
 3 case 17:
 4     outClass = 'pt-page-scaleDown';
 5     inClass = 'pt-page-moveFromRight pt-page-ontop';
 6     break;
 7 case 18:
 8     outClass = 'pt-page-scaleDown';
 9     inClass = 'pt-page-moveFromLeft pt-page-ontop';
10     break;
11 case 19:
12     outClass = 'pt-page-scaleDown';
13     inClass = 'pt-page-moveFromBottom pt-page-ontop';
14     break;
15  
16 // ...

希望你喜欢这篇文章，从而为你带去灵感做出一些令人兴奋的效果。

英文原文连接：A COLLECTION OF PAGE TRANSITIONS