CSS 漸層色的轉場與動畫

在正常的情況下，CSS 無法製作「漸層色轉場」或「漸層色動畫」，但只要運用 CSS 的自訂屬性「@property」就能做出漸層色的轉場與動畫效果，這篇教學會介紹相關做法。

快速導覽：

• 漸層色的轉場 ( transition )
• 漸層色的動畫 ( animation )

漸層色的轉場 ( transition )

下方範例先透過 @property 建立 --c1 和 --c2 兩個「顏色」屬性值，接著設定在轉場 transition 中指定這兩個屬性值的轉場時間 ( 自訂屬性值需要額外設定 )，以及在漸層色中使用這兩個自訂屬性，最後當 hover 懸停事件發生時修改屬性值，就能實現漸層色的轉場。

參考：CSS @property 自訂屬性值、轉場 transition、CSS 漸層色、:hover

線上展示：https://codepen.io/oxxo/pen/XJregOe

<!-- HTML 程式碼 -->
<h1>oxxo</h1>

<!-- CSS 程式碼 -->
<style>
  /* 設定第一組顏色 */
  @property --c1 {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
  }
  /* 設定第二組顏色 */
  @property --c2 {
    syntax: "<color>";
    inherits: true;
    initial-value: yellow;
  }
  h1 {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    color: red;
    text-align: center;
    font-size: 60px;
    line-height: 200px;
    transition: all 1s, --c1 1s,  --c2 1s;              /* 分別指定轉場時間 */
    background: linear-gradient(var(--c1), var(--c2));  /* 設定漸層色 */
  }
  h1:hover{
      color: blue;
      --c1: cyan;    /* 改變屬性值 */
      --c2: green;   /* 改變屬性值 */
  }
</style>

自訂屬性不單純只能設定顏色，下方範例改成「角度」和「百分比」的自訂屬性，就能運用漸層色，做出許多特別的轉場效果。

線上展示：https://codepen.io/oxxo/pen/JoPrJxv

<!-- HTML 程式碼 -->
<h1>oxxo</h1>

<!-- CSS 程式碼 -->
<style>
  /* 角度自訂屬性 */
  @property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 180deg;
  }
  /* 百分比自訂屬性 */
  @property --p1 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 33%;
  }
  /* 百分比自訂屬性 */
  @property --p2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 66%;
  }
  h1 {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    color: #fff;
    text-align: center;
    font-size: 60px;
    line-height: 190px;
    transition: all 1s, --angle 1s, --p1 1s, --p2 1s;  /* 分別指定轉場時間 */
    background: linear-gradient(var(--angle),
                                #fff 0%, 
                                #fff var(--p1),
                                #09c var(--p1),
                                #09c var(--p2),
                                #069 var(--p2),
                                #069 100%);           /* 設定漸層色 */
  }
  h1:hover{
      color: #000;
      --angle: 135deg;   /* 改變屬性值 */
      --p1: 80%;         /* 改變屬性值 */
      --p2: 90%;         /* 改變屬性值 */
  }
</style>

漸層色的動畫 ( animation )

下方範例先透過 @property 建立 --p1、--p2 和 --p3 三個「長度」屬性值，接著設定在定義動畫的 @keyframes 中修改自訂屬性，就能實現漸層色的動畫效果。

參考：CSS @property 自訂屬性值、動畫 animation、CSS 漸層色

線上展示：https://codepen.io/oxxo/pen/mybBwvg

<!-- HTML 程式碼 -->
<h1></h1>

<!-- CSS 程式碼 -->
<style>
  /* 定義第一個位置屬性 */
  @property --p1 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  /* 定義第二個位置屬性 */
  @property --p2 {
    syntax: "<length>";
    inherits: true;
    initial-value: 20px;
  }
  /* 定義第三個位置屬性 */
  @property --p3 {
    syntax: "<length>";
    inherits: true;
    initial-value: 40px;
  }
  h1 {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background-image: repeating-linear-gradient(
        45deg,
        orange var(--p1),  orange var(--p2),
        black var(--p2), black var(--p3));     /* 設定漸層色 */
    animation: 1s linear infinite oxxo;        /* 設定動畫 */
  }

  @keyframes oxxo {
    0% {
      --p1: 0px;     /* 改變屬性值 */
      --p2: 20px;   /* 改變屬性值 */
      --p3: 40px;   /* 改變屬性值 */
    }
    100% {
      --p1: 40px;   /* 改變屬性值 */
      --p2: 60px;   /* 改變屬性值 */
      --p3: 80px;   /* 改變屬性值 */
    }
  }
</style>

小結

透過 @property 自訂屬性，可以讓原本無法進行轉場或動畫效果的「漸層」變得有趣，也可以讓原本不容易處理的效果變得方便，有機會不妨在自己的網站中使用看看。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～