使用CSS transition和animation改變漸變狀態
特別宣告，本文根據 ofollow,noindex" target="_blank">@ANA TUDOR 的《 The State of Changing Gradients with CSS Transitions and Animations 》一文所整理。
到目前為止，CSS的漸變屬性 linear-gradient 和 radial-gradient 已經是很成熟的CSS特性了，而且 repeating-linear-gradient 和 conic-gradient 也越來越成熟。CSS漸變特性對於我們的幫助已經非常強大了，它們可以幫助我們繪圖、 建立圖片佔位符 、製作環形進度條等等。另外還可以通過 transition 和 animation 讓漸變動起來。
但是給漸變新增動畫效果目前還有很多極限性，如果不新增額外的元素或其他的漸變屬性，有些效果是無法實現的，比如下面這個效果。
不過，在Edge瀏覽器，使用 @keyframes 就可以實現上圖的效果，而且程式碼很簡單：
html {
background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;
animation: blinds 1s ease-in-out infinite alternate;
}
@keyframes blinds {
to {
background-image: linear-gradient(90deg, #f90 100%, #444 0);
}
}
在些基礎上，藉助CSS的處理器，比如Sass，可以讓上面的程式碼變得更為靈活：
@function blinds($open: 0) {
@return linear-gradient(90deg, #f90 $open*100%, #444 0);
}
html {
background: blinds() 50%/ 5em;
animation: blinds 1s ease-in-out infinite alternate;
}
@keyframes blinds {
to {
background-image: blinds(1)
}
}
雖然上面的程式碼實現了所需的效果，但使用CSS來維護和使用仍然還是需要編寫程式碼，這是事實。動畫效果也只是停留在 0% 到 100% 之間，能達到我們所要的效果。不過，要是使用 0 或 0px 來替代 0% 的話，結果就會令人失望，動畫效果失蹤了。更不用說在Chrome和Firefox瀏覽器上了，能看到的僅僅就是 #f90 到 #444 兩個顏色之間的切換，根本沒有停止位置的動效。
慶幸折是，現在我們有一個更好的選擇： CSS自定義屬性 ！
雖然我們可以獲得過 transition 效果（但不是 animation 效果），但是如果我們使用的屬性是可動畫化的，那麼CSS自定義屬性是不可動畫化。比如，當在 transfrom 中使用時，我們可以在 transition 中使用 transfrom 屬性。
讓我們來做一個效果，複選框選中時，橙色正方形（ .box ）將會移動並且會被壓扁的效果。我們在 .box 中定義了一個自定義屬性 --f ，並且初始值設定為 1 ：
.box {
--f: 1;
transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f));
}
當複選框被選中時 :checked ， .box 的自定義屬性 --f 的值變成 .5 ：
:checked ~ .box {
--f: .5
}
在 .box 中新增 transition 屬性，我們可以讓 .box 從一個狀態到另一個狀態時，整個過程是一種細膩的滑動效果。
.box {
--f: 1;
transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f));
transition: transform .3s ease-in;
}