如何在不使用 JavaScript 的情況下在頁面載入時製作 CSS3 過渡動畫？

不使用JavaScript 的頁面加載時的CSS3 過渡動畫

您可以在不使用JavaScript 的情況下在加載時將CSS3 過渡動畫應用到網頁嗎？

這個問題讓許多網頁開發者感到困惑，因為手頭上的選項出現了Limited:

• CSS3過渡延遲提供對元素效果延遲的控制，但僅適用於懸停事件。
• CSS3關鍵影格在頁面載入時確實有效，但其執行速度太慢，不適合實際使用。
• 標準CSS3 轉場 夠快，但不會在頁面載入時觸發動畫。

解決方案：CSS3 關鍵影格

不用擔心，使用 CSS3 關鍵影格提供了在頁面載入時實作動畫的可行解決方案。讓我們深入研究一個綜合範例：

導航選單滑入動畫

僅使用CSS3 關鍵幀，我們可以創建一個在頁面加載時滑入視圖的導航選單：

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {
  animation: 1s ease-out 0s 1 slideInFromLeft;
  background: #333;
  padding: 30px;
}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

在此程式碼中，@keyframes 規則定義了SlideInFromLeft動畫，將標題元素從 100% 離螢幕移動到正常位置。使用動畫屬性將動畫應用於標題元素，並使用適當的持續時間、計時函數和迭代計數值。

透過利用 CSS3 關鍵幀，我們成功實現了在頁面上執行的純 CSS 動畫加載，提供無縫且引人入勝的用戶體驗。

以上是如何在不使用 JavaScript 的情況下在頁面載入時製作 CSS3 過渡動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！