CSS3：過渡簡化版，工作時的背景顏色是漸變

Question

我已經準備了風格body二，所有的背景是梯度，也是我添加轉場效果的標籤：

body{ 
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); 
    -webkit-transition: all 1s linear 0s; 
} 

body.orange{ 
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.7), rgba(35, 35, 35, 1) 60%); 
} 

我用按鈕在兩種樣式之間切換。問題是樣式切換沒有過渡效果。

但是，當我將背景色設置爲純色，如「紅色」或「黑色」時，過渡效果再次顯示。

這裏是demo

爲什麼會這樣？我怎麼能做出漸變的背景色彩切換也有過渡效果？

Answer 1

CSS轉換規範說the color of a background can animate但梯度被歸類爲image。

如果你想得到一個漸變過渡效果，你將不得不僞造它，例如，通過將兩個元素放在另一個上面，並將頂點的不透明度從0改變爲1或1到0。