在 CSS 中為頁面載入建立淡入效果

1. 在 CSS 中使用 animation 屬性和 @keyframes 規則建立淡入效果
2. 在 CSS 中使用 animate() JQuery 方法建立淡入效果

淡入效果將元素的不透明度從隱藏增加到可見。選定元素的不透明度將在給定時間內發生變化。

本教程將介紹在 CSS 中載入頁面時實現這種效果的方法。

在 CSS 中使用 animation 屬性和 @keyframes 規則建立淡入效果

我們對淡入效果有了一些瞭解。

此方法將使用 animation 屬性和 @keyframes 規則在頁面載入時實現淡入效果。首先，讓我們瞭解 animation 屬性是如何工作的。

當一個元素的樣式及時從一種樣式更改為另一種樣式時，我們可以判斷它是一個動畫。animation 屬性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-方向按順序。

我們可以使用 animation 屬性僅指定 animation-name 和 animation-duration 屬性來建立淡入效果。 @keyframes 規則用於逐漸改變所選元素的 CSS 樣式。

結果，將建立動畫效果。我們使用 @keyframes 規則中的 animation-name 屬性值來選擇動畫以應用漸變樣式。

在@keyframes 規則中，我們使用 to 和 from 等選擇器來應用樣式。to 和 from 選擇器等價於 0% 和 100%。

使用 to 選擇器應用的樣式將逐漸更改為使用 from 選擇器應用的樣式。更改將與 animation-duration 屬性指定的時間一起發生。

要建立淡入動畫，我們可以使用 @keyframes 規則中的選擇器將頁面的不透明度從 0 更改為 1。@keyframe 規則的語法如下所示。

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

例如，在 HTML 的 p 標籤內寫一些文字。

在 CSS 中，選擇 html 標籤並將 animation 屬性設定為 fadein 2s。這裡，fadein 是 animation-name，2s 是 animation-duration。

接下來，使用@keyframes 關鍵字選擇動畫名稱 fadein，如上面的語法所示。將 0%寫為第一個關鍵幀選擇器並將 opacity 屬性設定為 0。

同樣，將另外兩個關鍵幀選擇器寫為 50%和 100%，並將 opacity 分別設定為 0.5 和 1。

在這裡，當頁面載入時，由於不透明度設定為 0，文字一開始會不太明顯。逐漸地，不透明度會改變，文字將在兩秒鐘內顯示出來。

因此，我們可以使用 animation 屬性來建立淡入效果。

示例程式碼：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

在 CSS 中使用 animate() JQuery 方法建立淡入效果

這個方法將討論另一種使用 jQuery 在 CSS 中建立淡入效果的方法。

我們可以使用 jQuery 中的 animate() 方法來實現我們的目標。animate() 執行所選元素樣式的漸變以建立動畫效果。

我們可以指定 CSS 樣式並提供動畫的速度。animate() 方法的語法如下所示。

(selector).animate({css - styles}, duration, easing, callback)

當我們使用 animate() 方法時，所選元素的預設樣式將被方法中指定的樣式覆蓋。

出於演示目的，我們將在 HTML 中使用與第一種方法相同的文字。首先，選擇 CSS 的 body 標籤並將 opacity 屬性設定為 0。

接下來，在 jQuery 中選擇 body 標籤並呼叫 animate() 方法。在方法內部，將樣式中的 opacity 設定為 1，並將 duration 設定為 2000。

在下面的示例中，2000 等於兩秒，即動畫的持續時間。最初，當頁面載入時，其不透明度為 0，並在兩秒內變為 1。

這樣，使用 jQuery 就實現了淡入效果。

示例程式碼：

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>