CSS - 過渡

CSS 過渡用於處理 CSS 中的動畫速度。這允許您在指定持續時間內為元素的樣式屬性更改設定動畫。

CSS 過渡示例

在這裡您可以看到 CSS 過渡的簡單效果，我們已在一個元素上應用了過渡，以便您可以區分有和沒有過渡效果的情況。

無過渡

有過渡

如何在 CSS 中使用過渡？

請按照以下步驟在 CSS 中建立過渡效果。

選擇元素： 使用 CSS 選擇器 來定位要應用過渡的特定 DOM 元素。
指定屬性： 對於 transition 屬性的值，選擇要設定動畫的 CSS 屬性（例如，background-color、width）。
設定持續時間： 定義過渡應持續多長時間（例如，0.5s 表示 0.5 秒）。此屬性的預設值為 0，因此，如果您未為此指定正值，則不會看到任何過渡效果。
定義時間函式和延遲： 這些是可選屬性。時間函式定義過渡的速度曲線（ease、linear 等），延遲定義過渡開始之前的等待時間。
定義最終狀態： 指定與元素互動時屬性的最終狀態（例如，懸停時）。

.selector {
    width: 10px;
    transition: width 2s ease 0s;
}    
.selector:hover {
    width: 20px;
}

此宣告將建立一個持續 2 秒的過渡效果，使用 ease 函式將寬度屬性從 10px 更改為 20px（懸停時）。

更改多個屬性值

我們可以透過指定以逗號分隔的值來為不同的屬性定義不同的過渡效果，如下所示。

div {
    transition: width 2s, height 4s, background-color 3s;
}

這表示寬度變化應在 2 秒內發生，高度變化應在 4 秒內發生，背景顏色變化應在 3 秒內發生。現在讓我們來看一個例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 30px;
            background-color: #f0f0f0;
            height: 250px;
        }
        div {
            width: 100px;
            height: 100px;
            padding: 8px;
            color: white;
            background-color: darkgreen;
            transition: width 2s, height 4s, background-color 3s;
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div> 
        Hover over me
    </div>
</body>

</html>

過渡的速度曲線

CSS transition-timing-function 屬性用於指定 CSS 過渡的速度曲線。它定義瞭如何計算過渡開始和結束之間的中間值。

div {
    transition: width 2s, height 4s;
    transition-timing-function: ease; 
}

我們也可以在 transition 屬性中將時間函式作為第三個值定義。

以下是時間函式的值

ease：過渡將先慢後快，然後慢慢結束（預設值）
linear：從開始到結束以相同速度過渡
ease-in：以緩慢的啟動速度過渡
ease-out：以緩慢的結束速度過渡
ease-in-out：以緩慢的啟動和結束速度過渡
cubic-bezier(n,n,n,n)：這允許我們為速度定義自己的值。要了解更多資訊，請檢視 三次貝塞爾函式 文章。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            transition: width 3s;
            left: 0;
        }

        div:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <h1>Hover Each to see transition</h1>
    <h2>linear</h2>
    <div style="transition-timing-function: linear;">
    </div>

    <h2>ease</h2>
    <div style="transition-timing-function: ease;">
    </div>

    <h2>ease-in</h2>
    <div style="transition-timing-function: ease-in;">
    </div>

    <h2>ease-out</h2>
    <div style="transition-timing-function: ease-out;">
    </div>

    <h2>ease-in-out</h2>
    <div style="transition-timing-function: ease-in-out;">
    </div>

    <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
    <div style="transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
    </div>
</body>
</html>

延遲過渡效果

transition-delay 屬性用於指定過渡開始前的等待時間。我們也可以使用 transition 簡寫屬性來指定。

div {
    transition: width 2s;
    transition-delay: 2s; 
}

示例

當您將滑鼠懸停在輸出中的 div 元素上時，過渡將在等待 1 秒後發生。

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 30px;
            background-color: #f0f0f0;
            height: 250px;
        }
        div {
            width: 100px;
            height: 100px;
            padding: 8px;
            color: white;
            background-color: darkgreen;
            transition: width 2s, height 4s, background-color 3s;
            transition-delay: 1s; 
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div> 
        Hover over me
    </div>
</body>

</html>

過渡 + 變換

CSS transform 也可與過渡效果一起使用。檢視下面的程式碼。

div {
    transition: transform 2s;
}

此宣告指定如果將變換（如縮放、旋轉或平移）應用於 div，則變換效果將在 2 秒內平滑地進行動畫。

示例

<!DOCTYPE html>
<html>

<head>
    <style> 
        div {
          width: 100px;
          height: 100px;
          background: darkgreen;
          transition: transform 2s;
        }
        
        div:hover {
          transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <p>Hover over the div element below:</p>
    <div></div>
</body>

</html>

CSS 過渡簡寫屬性

CSS transition 是以下屬性的簡寫屬性。

div{
    transition: [property] [duration] [timing-function] [delay];
}

property： 指定應用過渡的 CSS 屬性的名稱（例如，width、height、transform）。您可以使用 all 將過渡應用於所有更改的屬性。
duration： 指定過渡效果應持續多長時間（例如，2s 表示 2 秒）。
timing-function： 指定過渡的速度曲線。
delay： 設定過渡開始之前的延遲（例如，0.5s 表示半秒）。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 2s ease-in 0.5s;
        }
        
        div:hover{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div > </div>
</body>

</html>

CSS 過渡所有屬性

一些在 CSS 中用於過渡的常見屬性

屬性	描述	示例
transition	所有過渡屬性的簡寫屬性。	試試看
transition-delay	用於指定過渡開始前的等待時間。	試試看
transition-property	用於指定屬性名稱	試試看
transition-timing-function	用於指定執行過渡的時間函式	試試看

列印頁面