到目前為止，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 ：
新聞熱點
疑難解答
