文將向您展示如何創建簡單而新式的頁面切換的過渡效果。也許你已經發現了一些在或Keep Portland Weird等網站上看到的很酷的效果，其中兩層或多層疊加層在頁面上進行動畫處理以顯示一些新內容。讓我們看看他們如何做到這一點。我們只關注動畫部分，而不是內容的加載。對于效果，我們將使用CSS動畫。

頁面框架

對于我們的簡單演示，我們將創建一個完整的寬度和高度布局，其中一些箭頭將觸發疊加動畫。想法是顯示一個頁面，并在疊加動畫的中間，切換到另一個頁面。雖然使用的是靜態內容，但你可以在動畫過程中插入動態解決方案，以便即時獲取一些數據。

我們的HTML標簽如下：

疊加層的結構將使用JavaScript插入，它作為一個固定元素放在所有其他元素之上。根據頁面指示方向，為該元素提供一些CSS樣式類，以正確地應用樣式。疊加層將包含預先定義好的多個層。每個層都設置不同的背景顏色以及特定的動畫。

頁面代碼類似如：

每層還設置不同的背景顏色。為了展示獨特的效果，將為每個層設置不同的動畫。為此，我們最初將父層設置為屏幕外（off-screen）位置，然后將該層動畫化。主要元素的初始設置在腳本中完成（見下文）。然后在樣式表中定義層的動畫行為，這取決于效果類，以及要顯示的頁面的其他樣式。

CSS

首先，讓我們看一下我們的主體，容器和頁面的一些常規樣式（省略供應商前綴）：

我們希望我們的頁面是全寬和高度，并隱藏任何溢出。默認情況下，使用JS（我們使用Modernizr），頁面被隱藏，當前類將相應的頁面設置為可見。我們希望確保我們的布局在沒有JavaScript的情況下正常運行，因此我們添加了"條件"樣式。

讓我們來展示的風格是怎樣的。我們開始層置于所有之上，而且具有固定的位置：

根據當前使用的方向，需要設置一些初始定位樣式。正如稍后將看到的JavaScript角本，我們將設置一些其他的變換，以確保我們的初始層的頂部始終是面向屏幕的那個。這將簡化效果，因為內層動畫將始終相同（向上移動），因此如果父項旋轉并正確定位，我們無需為每個方向定義新動畫：

圖層將具有默認背景顏色，然后以動態方式為每個效果單獨定位：

接下來，讓我們看看一個示例效果。三層效果通過特殊的為每個圖層添加動畫。anim-Effect類被添加到主體中，以便我們知道我們目前使用的是哪種效果。該revealer–animate是考慮到初始順序和觸發動畫。

正如我們在這里看到的，我們將向所有圖層添加相同的動畫屬性，但動畫名稱除外。通過三種不同的動畫，我們定義了關鍵幀中每個動畫的延遲。就像我們一樣，我們確保所有動畫在同一時刻結束，但允許不同的外觀時間：

我們在這里做的是讓第一層先移動，然后在中間"暫停"直到75％，同時在可見屏幕的頂部。然后我們將其移向相反的方向以顯示新內容。對于其他兩個層也是如此，只是在這里我們在不同的關鍵幀處啟動它們，減少"暫停"。最后一層根本沒有暫停，只是從25％開始到另一邊。

JavaScript

我們做了一個小插件，根據一些選項創建了revealer 。默認選項如下：

添加啟動器及其圖層和相應效果類的功能如下所示：

最關鍵的函數設置我們的揭密元素的初始定位，并添加用于觸發動畫和所選效果的控件類。

根據我們選擇的方向，我們需要確保揭示元素獲得正確的變換。請記住，我們只是簡單地旋轉和定位探測器，使頂部始終面向屏幕，以便層始終向上移動。對于角落情況，我們需要確保展示器的寬度和高度正確設置到頁面的對角線。對于左右兩種情況，我們需要確保展示器的高度是屏幕的寬度，因為我們將它旋轉90度。

以上講述了通過CSS和JavaScript實現多層頁面的切換動畫效果，希望這個小的技巧能對你有所幫助。如果感興趣，你還可以訪問以下地址，查看動畫的效果的Demo。

http://www.ikinsoft.com/demo/ani_effects/index.html

著html5的來襲，我們不難發現，生活工作中瀏覽的網站也變的高大上起來，在這背后我們就要考慮這些高大上的效果如何去實現，如何更接地氣，那么我們今天來說一個簡單的小例子：利用CSS3動畫知識實現三角形疊加效果，來來來看圖說話。

CSS3三角形疊加效果

看完動態效果大家更想知道其代碼設計咯，我們一起來看核心代碼：

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

更多詳細實現過程，可以點擊如下講解：

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

更多案例分享可加群142991222關注