怎么用CSS3的Animations實現平滑的頁面加載

這篇文章將為大家詳細講解有關怎么用CSS3的Animations實現平滑的頁面加載，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　我對Apple.com產品頁面上看到的一些微妙動畫印象深刻。它通常以在頁面加載時播放的動畫開始，其中通過滑動/淡入在頁面上引入元素。它是如此微妙，但對用戶來說是如此令人滿意。

　　最近，我發現了一些問題，即添加簡單的動畫效果而不會出現波動，從而破壞了體驗。

　　在頁面加載時播放動畫的問題在于許多資源（包括操縱DOM的圖像和腳本）導致瀏覽器重新繪制/重新布局。這在嘗試播放動畫時與瀏覽器資源競爭，導致丟幀。

　　一種解決方法是延遲動畫的開始以允許在播放動畫之前繪制頁面。

　　通常在頁面上引入/顯示元素時，元素將被隱藏（不透明度：0），并且隨著時間的推移會獲得完全不透明度。

　　雖然動畫屬性有'delay'參數，但為此參數指定時間將在其最終幀中顯示指定延遲長度的元素。然后它將隱藏元素，并將動畫設置為完全不透明度。這是一種不希望的效果。我們不希望在延遲期間看到最后一個關鍵幀。

　　要避免在延遲期間看到該元素，請按照下列步驟操作：

　　1）在我們想要動畫的html中創建一個div

　　2）在我們的css文件中創建關鍵幀（這些基本上將定義事物的變化，在這種情況下從不透明度0到不透明度100）

　　@keyframesfadeIn{from{opacity:0;}to{opacity:1;}}

　　3）在我們的css中創建div標簽，定義我們的動畫（持續時間，開始延遲等）并將其鏈接到我們的關鍵幀

　　.fade-in{

　　opacity:0;/*makethingsinvisibleuponstart*/

　　animation:fadeInease-in1;/*callourkeyframenamedfadeIn,useanimattionease-inandrepeatitonly1time*/

　　animation-fill-mode:forwards;/*thismakessurethatafteranimationisdoneweremainatthelastkeyframevalue(opacity:1)*/

　　animation-duration:1s;

　　animation-delay:1.5s}

　　關鍵是使用：

　　animation-fill-mode:forwards

　　和

　　opacity:0

　　結合，這會隱藏我們想要為指定延遲設置動畫的元素（不透明度：0），并強制動畫在最后一個關鍵幀上停止（不透明度：1）。

關于“怎么用CSS3的Animations實現平滑的頁面加載”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。