如何使用CSS3的Animations實現平滑的頁面加載

本篇文章給大家分享的內容是關於如何使用 CSS3的Animations實現平滑的頁面加載，有需要的朋友可以參考一下。

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

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

在頁面載入時播放動畫的問題在於許多資源（包括操縱DOM的圖像和腳本）導致瀏覽器重新繪製/重新佈局。這在嘗試播放動畫時與瀏覽器資源競爭，導致丟幀。 （推薦教學：css3影片教學）

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

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

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

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

1）在我們想要動畫的html中建立一個div 
2）在我們的css文件中建立關鍵影格（這些基本上將定義事物的變化，在這種情況下從不透明度0到不透明度100）

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3）在我們的css中建立div標籤，定義我們的動畫（持續時間，開始延遲等）並將其連結到我們的關鍵影格

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s}

關鍵是使用：

animation-fill-mode:forwards

和

opacity: 0

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

以上是如何使用CSS3的Animations實現平滑的頁面加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！