CSS 轉場或動畫能否在頁面載入時為文字創造淡入效果？

使用 CSS 在頁面載入時使文字段落淡入動畫

問題：

是否可以利用 CSS過渡來建立文字段落與頁面的淡入效果

說明：

CSS 過渡允許元素在指定時間段內從一種樣式平滑過渡到另一種樣式。此屬性可以應用於 opacity 屬性，實現淡入效果。

方法一：CSS 動畫

對於自呼叫過渡，CSS 動畫較適合。它們提供了專門為此目的而設計的專用動畫語法。

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

  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

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

瀏覽器支援：

• 所有現代瀏覽器
• Internet Explorer 10

Internet Explorer 10

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

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

方法2：使用Class 進行CSS轉換Toggle

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

或者，可以使用類別切換來觸發CSS 轉換：

• 瀏覽器支援：

瀏覽器支援：

瀏覽器支援：

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

瀏覽器支援：

瀏覽器支援：Internet Explorer 10 方法3：使用jQuery 進行動畫為了跨瀏覽器相容性，可以使用jQuery 來動畫不透明度變化： 。郵件方法：[DotmailApp](http://dotmailapp.com/) 使用類似的方法，只是稍微延遲一下，以增強效果。然而，該技術需要具有更廣泛瀏覽器支援的 jQuery 2.x。

以上是CSS 轉場或動畫能否在頁面載入時為文字創造淡入效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！