到目前為止，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;}

總結

以上所述是小編給大家介紹的使用CSS transition和animation改變漸變狀態的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！