有的時候，嗯，應該說某些特定場合，我們可能需要下面這樣的動畫效果，漸變 + animation ：

假設我們漸變的寫法如下：

div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
}

按照常規想法，配合 animation ，我們首先會想到在 animation 的步驟中通過改變顏色實現顏色漸變動畫，那麼我們的 CSS 程式碼可能是：

div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%)
 
;
    animation: gradientChange 2s infinite;
}

@keyframes gradientChange  {
    100% {
        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);
    }
}

上面我們用到了三種顏色：

• #ffc700 黃色
• #e91e1e 紅色
• #6f27b0 紫色

最後，並沒有我們預期的結果，而是這樣的：

 CodePen Demo

我們預期的過渡動畫，變成了逐幀動畫。 

也就是說，線性漸變是不支援動畫 animation 的，那單純的由一個顏色，變化到另外一個顏色呢？像下面這樣：

div {
    background: #ffc700;
    animation: gradientChange 3s infinite alternate;
}

@keyframes gradientChange  {
    100% {
        background: #e91e1e;
    }
}

發現，單純的單色值是可以發生漸變的：

CodePen-Demo

0.1. So

總結一下，線性漸變（徑向漸變）是不支援 animation

查找了下文件，在 background 附近區域截圖如下：

哪些 CSS 屬性可以動畫?，上面的截圖是不完整的支援 CSS 動畫的屬性，完整的可以戳左邊。

對於 background 相關的，文件裡寫的是支援 background 但是沒有細說不支援 background: linear-gradient()/radial-gradient() 。

那麼是否我們想要的背景色漸變動畫就無法實現了呢？下面我們就發散下思維看看有沒有其他方式可以達到我們的目標。

1. 通過 background-position 模擬漸變動畫

上面哪些 CSS 屬性可以動畫的截圖中，列出了與 background 相關還有 background-position ，也就是 background-position 是支援動畫的，通過改變 background-position 的方式，可以實現漸變動畫：

div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: bgposition 2s infinite linear alternate;
}

@keyframes bgposition {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

這裡我們還配合了 background-size。首先了解下：

background-position：指定圖片的初始位置。這個初始位置是相對於以 background-origin 定義的背景位置圖層來說的。

background-size：設定背景圖片大小。當取值為百分比時，表示指定背景圖片相對背景區的百分比大小。當設定兩個引數時，第一個值指定圖片的寬度，第二個值指定圖片的高度。

通過 background-size: 200% 100% 將圖片的寬度設定為兩倍背景區的寬度，再通過改變 background-position 的 x 軸初始位置來移動圖片，由於背景圖設定的大小是背景區的兩倍，所以 background-position 的移動是由 0 0 -> 100% 0 。

2. 通過 background-size 模擬漸變動畫

既然 background-position 可以，那麼另一個 background-size 當然也是不遑多讓。與上面的方法類似，只是這次 background-position 輔助 background-size ，CSS 程式碼如下：

div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
    background-position: 100% 0;
    animation: bgSize 5s infinite ease-in-out alternate;

}

@keyframes bgSize {
    0% {
        background-size: 300% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

CodePen--Demo--position-size 實現漸變動畫

通過改變 background-size 的第一個值，我將背景圖的大小由 3 倍背景區大小向 1 倍背景區大小過渡，在背景圖變換的過程中，就有了一種動畫的效果。

而至於為什麼要配合 background-position: 100% 0 。是由於如果不設定 background-position ，預設情況下的值為 0% 0%，會導致動畫最左側的顏色不變，像下面這樣，不大自然：

3. 通過 transform 模擬漸變動畫

上面兩種方式雖然都可以實現，但是總感覺不夠自由，或者隨機性不夠大。

不僅如此，上述兩種方式，由於使用了 background-position 和 background-size，並且在漸變中改變這兩個屬性，導致頁面不斷地進行大量的重繪（repaint），對頁面效能消耗非常嚴重，所以我們還可以試試 transfrom 的方法：

下面這種方式，使用偽元素配合 transform 進行漸變動畫，通過元素的偽元素 before 或者 after ，在元素內部畫出一個大背景，再通過 transform 對偽元素進行變換：

div {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border: 2px solid #000;

    &::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        bottom: -100%;
        right: -100%;
        background: linear-gradient(45deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 100% 100%;
        animation: bgposition 5s infinite linear alternate;
        z-index: -1;
    }
}


@keyframes bgposition {
    0% {
        transform: translate(30%, 30%);
    }
    25% {
        transform: translate(30%, -30%);
    }
    50% {
        transform: translate(-30%, -30%);
    }
    75% {
        transform: translate(-30%, 30%);
    }
    100% {
        transform: translate(30%, 30%);
    }
}

實現原理如下圖所示：

CodePen--Demo--偽元素配合transform實現背景漸變

上面列出來的只是部分方法，理論而言，偽元素配合能夠產生位移或者形變的屬性都可以完成上面的效果。我們甚至可以運用不同的緩動函式或者借鑑蟬原則，製作出隨機性十分強的效果。

當然，本文羅列出來的都是純 CSS 方法，使用 SVG 或者 Canvas 同樣可以製作出來，而且效能更佳。感興趣的讀者可以自行往下研究。

4. 運用背景色漸變動畫

背景色漸變動畫具體可以運用在什麼地方呢，稍微舉個例子。

4.1. 背景色漸變過渡實現按鈕的明暗變化

CodePen -- Demo -- 背景色漸變過渡實現按鈕的明暗變化

除此之外，在背景板凸顯文字，讓一些靜態底圖動起來吸引眼球等地方都有用武之地。