如何使用CSS創建整頁動畫-js教程-PHP中文網

鑰匙要點

考慮此基本@keyframes規則：

>使CSS動畫響應響應涉及相對單位喜歡百分比或視口單元，而不是像像素這樣的絕對單位。這樣可以確保動畫尺寸正確，而不管屏幕尺寸如何。您還可以使用媒體查詢根據特定的屏幕尺寸或設備類型調整動畫。

>我可以將CSS動畫與svg？

>我可以使用CSS？

對背景圖像屬性進行動畫動畫，而不可以CSS來動畫。但是，您可以使用不透明度屬性在多個背景圖像之間逐漸消失來實現類似的效果。

首頁

web前端

js教程

如何使用CSS創建整頁動畫

Jennifer Aniston

Feb 25, 2025 pm 05:26 PM

如何使用CSS創建整頁動畫

鑰匙要點

> 在應用CSS轉換為元素時，為了確保一致的結果，無論其內容的大小如何，可以將身體元素的大小固定到瀏覽器窗口的大小，並且可以將內容固定在包裝器中。這種方法還可以掩蓋複雜內容可能發生的任何漸進式渲染，重新匯總或資源加載。

。在瀏覽體驗期間，可以在戰略時期設置

動畫，以使內容過渡到頁面加載並在用戶單擊鏈接時看不見的視圖。設置動畫將頁面內容轉換為視圖的最佳位置是元素頂部。 AnimationEnd事件可用於檢測動畫何時完成，然後觸發導航事件。

Internet Explorer（Internet Explorer 10支持CSS 3D和2D變換和CSS動畫）等現代瀏覽器。通過利用GPU的功能並與常規JavaScript進行異步運行，這些技術為Web內容提供了更具性能和靈活的替代方案。

>我已經討論過如何使用CSS 3D變換以及以前文章中的CSS動畫和過渡。在本文中，我想通過描述可以在導航過程中使用的“全頁動畫”的概念來為這些技術介紹一個更“非常規”的用例，以增加瀏覽的流動性和連續性。我們的目標是獲得無縫的瀏覽體驗，當用戶訪問頁面並在單擊鏈接或執行相關操作時，內容順暢地顯示出視圖。

這些效果可以通過使用CSS動畫轉換HTML 元素來實現。但是，此用例提出了一些我們認為值得討論的考慮因素，例如佈局和尺寸對轉換的效果，以及如何適當的時間頁導航，以便它們與我們的動畫正確融合。 >

>本文中的代碼示例使用IE10 Release Preview支持的未解決的CSS標記；其他瀏覽器可能需要CSS動畫的供應商前綴，而CSS會轉換所使用的屬性。

轉換頁面的整個內容

CSS變換是在HTML DOM元素的風格屬性上定義的。例如，沿其z軸旋轉45度的元素的標記看起來像這樣：>

#element {
    transform: rotateZ(45deg);
}

登入後複製

>將轉換附加到HTML文檔的

元素上的工作方式完全相同。因此，為了聲明性地添加相同的效果，您可以執行相同的效果。

body {
    transform: rotateZ(45deg);
}

登入後複製

讓我們看一下將轉換應用於身體元素時的頁面前後拍攝的鏡頭：

如何使用CSS創建整頁動畫應用旋轉（45DEG）轉換為文檔的身體元素。對於三維變換，CSS轉換規範定義了可以在我們轉換的元素的母體上指定的透視屬性。在轉換內容的元素時，必須將其應用於位於DOM層次結構中上方的元素。這樣做很簡單：

在元素上將其與旋轉（45度）變換結合起來，會產生以下結果：>

html {
    perspective: 500px;
}

登入後複製

將旋轉（45DEG）轉換為的透視圖：。

>我們可以在人體元素上操縱轉化 - 原始特性以獲得有趣的結果。讓我們看一下幾個示例：上面的標記將沿x旋轉作為人體元素設置，同時使用轉化原孔將旋轉的起源轉移到元素的底部。有效地，這將文檔的內容“進入”了這樣的屏幕：

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

登入後複製

>我們還可以在文檔的根部元素上操縱透視 - 原始屬性，以實現離軸投影效應。將的樣式更改為：

> 我們的頁面現在看起來像這樣：

通過使用CSS變換，我們可以輕鬆地操縱整個頁面內容的視覺外觀。由於通常仍然適用了通常的佈局和尺寸規則，因此人體元素（尤其是使用百分比值或依賴轉換 - 原始屬性的元素）可能會導致不同的視覺效果，這取決於我們頁面的內容。回想我們以前的rotatex（45DEG）示例，其中轉換 - 原始素將其設置為50％100％。

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

登入後複製

在下面，您可以在應用轉換之前和之後查看結果。

請注意，內容如何實際上並不在窗口底部，而是在視口外的某個時候。這是CSS變換的預期行為：

正常佈置，然後沿屏幕上某個地方的底部邊緣旋轉。您還會注意到，內容的實際腳印已經擴展（查看“後圖”圖片中的滾動條），以適應變換的內容（我們正在使用透視圖投影的事實使此效果更加多發音）。

>那麼，在將轉換應用於我們的身體元素時，我們如何處理任意尺寸的內容？自定義調整所有內容，以確保身體的大小不會擴大超過一定量可能是不現實的。取而代之的是，我們可以使用簡單的HTML/CSS模式，該模式使我們能夠將身體元素的大小固定到瀏覽器窗口的大小，並在包裝器

中附加內容。以下標記實現了：

#element {
    transform: rotateZ(45deg);
}

登入後複製

>下面的插圖顯示了頁面垂直滾動時發生的情況，然後我們將旋轉（45DEG）直接轉換為文檔的

元素（左）（左）和使用包裝模式（右）： >

如何使用CSS創建整頁動畫

由於離軸投影，轉換的直接應用導致視覺結果偏斜（因為我們不再查看身體元素的“中心”）。使用包裝器圖案確保元素的觀點 - 原始屬性（默認為50％50％）將始終以與元素有關，從而使我們具有令人愉悅的視覺效果。

>通過利用上述模式並設置CSS隨時使用百分比值轉換，我們可以以一致的方式影響我們的

元素，而不論其內容的大小如何。 > 從變換到動畫

>整理了將CSS轉換到元素的複雜性後，CSS動畫是下一步。通過遵循上述原則，我們可以創建動畫，以有趣的方式將我們的Web內容視為視圖（或從視圖中刪除）。

考慮此基本@keyframes規則：

應用於元素時，此動畫將導致其左側旋轉。當應用於使用我們的包裝器模式的元素時，視覺結果會更有趣。該文檔實際上將從瀏覽器窗口可見區域的外部旋轉，然後旋轉到完整視圖：>

body {
    transform: rotateZ(45deg);
}

登入後複製

同樣，我們可以撰寫動畫，這些動畫會流暢地從視圖中刪除我們的Web內容。例如，如果我們希望我們的頁面在旋轉時消失到遠處，我們可以使用類似的東西：

#element {
    transform: rotateZ(45deg);
}

登入後複製

視覺結果為：

如何使用CSS創建整頁動畫

>由於我們可以利用CSS動畫的全部功能來影響我們的整個Web內容，因此我們在生成這些頁面效果方面具有很大的靈活性（而且我們當然不限於僅使用CSS變換）。但是，一旦我們構成了要應用於內容的效果，我們如何使它們在頁面導航過程中觸發？

將動畫附加到

>

>我們的目標是在瀏覽器體驗期間在戰略時期使用觸發動畫，以使內容過渡的外觀在頁面加載並在用戶單擊鏈接上時的視圖時將其視為視圖。

。

>在身體元素中添加動畫的第一個直觀位置是Onload JavaScript事件。然而，事實證明，當on load火災實際上為時已晚時添加動畫。當我們頁面中的整個內容完成加載時（包括任何圖像或其他帶寬密集型資源），此事件實際上會觸發。將動畫附加到帶寬密集的頁面上的onload將導致我們的內容顯示“正常”，然後動畫觸發並將內容重新包含到視圖中。不完全是我們目標的效果。

> 或者，我們可以利用當瀏覽器完成內容的DOM結構時觸發的Domcontentloaded事件（但有可能在資源完成加載之前）。 IE測試驅動器domcontentloaded演示說明了這兩個事件之間的區別。但是，在具有復雜的Web內容的情況下，現代瀏覽器可能會選擇執行“漸進式”渲染，並在加載整個DOM樹之前顯示頁面。在這些情況下，視覺結果將類似於Onload方案。

>設置一個動畫的最佳位置，該動畫過渡我們的頁面內容是元素的頂部。這樣可以確保動畫隨著內容的渲染而開始正確（並且內容的啟動位置將是我們所選動畫的關鍵幀的開始位置）。這種方法的一個令人愉悅的副作用是，動畫實際上可以掩蓋可能與復雜內容一起發生的任何進行性渲染，重新分析或資源加載。 >

>設置動畫，使我們的內容過渡出來也很有趣。人們可以假設我們可以將onclick處理程序附加到我們內容中所有感興趣的元素上（例如所有標籤），並且只需在回調函數中設置相關的動畫屬性（Animation-name，Animation-Duration等）。但是，如果我們實際上沒有延遲導航的發生，我們將不會看到我們的預期流體過渡。

這是利用CSS動畫規範中描述的動畫事件的好機會。特別是，我們可以使用AnimationEnd事件來檢測動畫何時完成，然後觸發導航（例如，通過設置window.location.href）。因此，我們的onclick將觸發“刪除從視圖”動畫，並在

上註冊一個動畫結構的處理程序，以確保發生導航事件。

>實時演示可用

>我們創建了一個演示和教程，以使CSS變換和動畫充滿活力，以提供深度和示例，超出了我們在此處顯示的內容。該教程本身在頁面導航期間使用了全頁動畫，該動畫在Windows 8上的Internet Explorer 10以及Chrome和Firefox的最新版本中使用。

>簡單地享受頁面到頁面的動畫，使用“繼續……”鏈接在每個頁面的右下角中瀏覽教程的頁面。 >

在教程末尾，我們提供了一些有關如何將這些動畫與您自己的Web內容合併的其他指南和示例代碼。

>將其包裹起來

CSS變換和CSS動畫是兩個強大的功能集，可實現更豐富，更身臨其境的網絡體驗。通過少量努力，您可以創建網頁（甚至是靜態的頁面），以提供流暢且幾乎類似應用的導航體驗。如果您喜歡閱讀這篇文章，那麼您會喜歡學習；從大師那裡學習新鮮技能和技術的地方。成員可以立即訪問SitePoint的所有電子書和互動在線課程，例如實用的CSS。

全頁CSS動畫上經常詢問問題

> CSS動畫和JavaScript動畫之間的關鍵區別是什麼？

CSS動畫和JavaScript動畫具有與動畫Web元素的相同目的，但它們具有一些關鍵差異。 CSS動畫更容易實現，尤其是對於簡單的動畫。當瀏覽器的渲染引擎處理時，它們也更加友好。但是，與JavaScript動畫相比，CSS動畫的控制力和靈活性有限。另一方面，JavaScript動畫提供了更多的控制和靈活性，可以進行複雜的動畫。它們可以實時暫停，逆轉或操縱，也可以響應用戶互動。