如何使用 CSS、jQuery 或兩者在頁面載入時創建平滑的淡入文字動畫？

使用CSS 在頁面載入時建立淡入動畫

問題： 透過建立一個平滑淡入的文字段落來增強網站美感頁面

解：

使用CSS動畫

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  animation: fadein 2s;
  animation-fill-mode: forwards;
}

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

• 使用CSS 動畫實現此解決方案，確保與所有現代瀏覽器相容.

使用jQuery

$("#test p").addClass("load");

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

使用jQuery

利用jQuery 在頁面載入時新增一個類，透過CSS 過渡觸發淡入。

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

• 模擬 DotMail 的方法

模仿淡入效果DotMail 透過 jQuery 延遲和動畫的組合。

• 瀏覽器相容性：
• CSS 動畫： 現代瀏覽器與網際網路資源管理器10
CSS 動畫：
• 現代瀏覽器與網際網路資源管理器10
CSS轉換：

現代瀏覽器與Internet Explorer 10

jQuery（方法 2 和 3 所需）： 因版本而異，但通常與舊版瀏覽器交叉相容。 選擇最適合您的瀏覽器支援要求和所需的動畫自訂等級的方法。

以上是如何使用 CSS、jQuery 或兩者在頁面載入時創建平滑的淡入文字動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！