CSS - transition 屬性

CSS transition 屬性允許您在指定持續時間內為元素的樣式屬性更改新增動畫效果。它們提供了一種簡單有效的方法，無需複雜的 JavaScript 程式碼或外部庫即可為網頁元素新增動畫。

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

transition-property
transition-duration
transition-timing-function
transition-delay
transition-behavior（此屬性處於實驗階段，可能不受支援）。

可能的值

<length> − 特定的長度值，例如畫素 (px)、釐米 (cm)、英寸 (in) 等。

應用於

所有元素，::before 和 ::after 偽元素。

語法

transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;

transition 屬性的值定義如下：

none 值表示此元素將沒有過渡效果。這是預設值。
使用逗號分隔一個或多個單屬性過渡。

單屬性過渡指定一個特定屬性或所有屬性的過渡。這包括：

一個或零個值，指示應應用過渡的屬性。這可以指定為：
- 一個<custom-ident>，表示單個屬性。
- 在過渡中，all 值表示過渡將應用於元素更改其狀態時所有更改的屬性。
- 如果沒有指定值，則將假定為all 值，並且過渡將應用於所有更改的屬性。
指定零個或一個<easing-function> 值，指示要使用的緩動函式。
為過渡屬性指定零個、一個或兩個<time> 值。第一個解析的時間值應用於transition-duration，第二個值分配給transition-delay。
如果屬性具有離散動畫行為，則零個或一個值指示是否啟動過渡。如果存在值，則可以是allow-discrete 或normal 關鍵字。

CSS 過渡 - 使用兩個值

以下示例演示將過渡應用於padding 屬性，持續時間為2s。當您將滑鼠懸停在方框上時，填充增加到15px，背景顏色更改為greenyellow：

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS 過渡 - delay 值

以下示例演示將過渡應用於padding 屬性。過渡需要2s才能完成，並在延遲0.5s後開始：

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s .5s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS 過渡 - 緩動函式

以下示例演示將過渡應用於background-color 屬性。當您將滑鼠懸停在方框上時，背景顏色將更改為綠黃色，在4s 的持續時間內使用ease-in-out 定時函式開始平滑的顏色過渡：

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 15px;
      transition: background-color 4s ease-in-out;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS 過渡 - 緩動函式和延遲

以下示例演示將過渡應用於padding 屬性。當您將滑鼠懸停在方框上時，背景顏色將更改為綠黃色，填充增加到 15px，在4s 的持續時間內使用ease-in-out 定時函式開始平滑過渡，並延遲0.7s：

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 4s ease-in-out 0.7s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS 過渡 - behavior 值

以下示例演示將過渡應用於background-color 屬性。當您將滑鼠懸停在方框上時，背景顏色將更改為綠黃色，在5s 的持續時間內使用allow-discrete 定時函式開始平滑過渡：

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: background-color 5s allow-discrete;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS 過渡 - 應用於兩個屬性

以下示例演示將對文字顏色應用2s 的過渡，對margin-left 應用4s 的過渡。文字顏色將在2s 內過渡，而左外邊距將需要4s：

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: color 2s, margin-left 4s;
      background-color: lightskyblue;
   }
   .box:hover {
      color: red;
      margin-left: 70px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS 過渡 - 相關屬性

以下是與過渡相關的 CSS 屬性列表：

屬性	值
transition-delay	確定屬性值更改時在開始過渡效果之前要等待的時間量。
transition-duration	確定過渡動畫應完成的時間量。
transition-property	指定哪些 CSS 屬性應應用過渡效果。
transition-timing-function	確定為受過渡效果影響的 CSS 屬性生成哪些中間值。

列印頁面