漸變背景也能有 transition ？CSS @property 的應用

前言

今天來聊聊一年多前我就在關注的 CSS 屬性。

我們先來看一個問題，現在有一個 background: linear-gradient() 的元素，如果我們在 :hover 時直接更改 linear-gradient 的屬性，他是不會有 transition 的。如以下示範：

.container {
  background: linear-gradient(45deg, #23232b, #5B86E5);
  transition: 0.8s;
}
.container:hover {
  background: linear-gradient(405deg, #2ecee0, #5B86E5);
}

現在有一個 CSS 屬性可以完美解決這個問題，就是 @property。

@property 屬性

我們先簡單設置一下 .container 的樣式。

.container {
  display: grid;
  place-content: center;
  width: 480px;
  height: 320px;
  color: rgba(255, 255, 255, 0.4);
  border-radius: 32px;
}

接著直接介紹今天的主角 - @property

@property --gradient-color-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #23232b;
}
@property --gradient-color-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #5B86E5;
}
@property --gradient-rotate {
  syntax: '<angle>';
  inherits: false;
  initial-value: 45deg;
}

這邊我們設置三個 @property，分別為漸層的兩個顏色和角度，而他的語法也蠻好理解的：

1. syntax : 此屬性的類型，基本上涵蓋所有的 css 類型了，例如 number、percentage、color、integer、angle 等等。
2. inherits : 能否被繼承
3. initial-value : 初始值

使用 @property

基本上 @property 可以看成另一種 css 變數，所以使用方法一樣為 var(—your-property)

.container {
  /* ... */
  background: linear-gradient(var(--gradient-rotate), var(--gradient-color-1), var(--gradient-color-2));
}

神奇的是，@property 是支持 transition 的，所以我們在 hover 只要改變 @property 的值，就可以做出具有 transition 的漸層背景。

.container {
  /* ... */
  transition: --gradient-color-1 0.8s, --gradient-color-2 0.8s,
   --gradient-rotate 0.8s, color 0.8s;

  &:hover {
      --gradient-color-1: #2ecee0;
      --gradient-color-2: #5B86E5;
      --gradient-rotate: 405deg;
      color: rgba(255, 255, 255, 1);
  }
}

小結

基本上 @property 讓之前不能有漸變的 css 屬性都可以有 transition 了，非常酷也非常實用。

比較可惜的是支援度還不夠高，目前只有 89%，但相比一年多前已經增加很多，相信不久之後就可以用在實際的網站中了。