CSS - transition 屬性



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

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

可能的值

  • <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-discretenormal 關鍵字。

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 屬性生成哪些中間值。
廣告