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;
}

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

更改多個屬性值

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

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

這表示 width 的更改應在 2s 內發生，height 的更改應在 4 秒內發生，background-color 的更改應在 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	用於指定執行過渡的時間函式	嘗試一下

列印頁面