CSS漸變動畫

我想要按照here所描述的方式爲CSS漸變設置動畫效果，但我無法使其工作。作爲一個例子，我已經放在一起this jsfiddle。CSS漸變動畫

作爲一個概述，似乎CSS漸變漸變似乎沒有工作。

div#Machine { 
    -webkit-transition: background 5s; 
    -moz-transition: background 5s; 
    -ms-transition: background 5s; 
    -o-transition: background 5s; 
    transition: background 5s; 
    background: rgb(71, 234, 46); 
    background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)), color-stop(100%, rgba(63, 63, 63, 1))); 
    background: -webkit-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -o-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -ms-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f', GradientType=0); 
} 
div#Machine.doublewin { 
    background: rgb(247, 247, 49); 
    background: -moz-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 247, 49, 1)), color-stop(100%, rgba(63, 63, 63, 1))); 
    background: -webkit-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -o-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -ms-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f', GradientType=0); 
}

我正在使用一些JavaScript/jQuery來添加/刪除「doublewin」類。當使用相同的代碼，但使用純色背景時，它可以正常工作，如jsfiddle鏈接所示。

它實際上可以動畫一個CSS3漸變，或者我做錯了什麼？

任何幫助，非常感謝。

來源

2013-09-01 Dan Twining

似乎過渡與漸變尚不支持，我不知道如何答案被接受/ upvoted，你可能想檢查此[其他答案]（http://stackoverflow.com/a/9695075/2049063 ）使用絕對定位元素進行「假」轉換的方法 –

嗨，我是第一個答案的人。我目前正在努力尋找爲什麼它不起作用，並且對造成的不便表示非常抱歉。 – arik

看看這裏http://jsbin.com/UsUtiQek/4/ – 2014-01-24 14:16:39

看起來你不能爲css背景漸變添加動畫效果，但是你仍然可以使不透明度變成動畫來嘗試使其工作。

如果有兩個容器，一個在另一個具有完全相同的寬度和高度的頂部，每個具有不同的梯度的背景顏色，可以淡出在頂部容器中以不透明度：0

如果你不想爲第二個背景容器的代碼添加額外的標記，你可以使用CSS僞選擇器:: before和:: after來做到這一點。

來源

2013-09-01 21:21:24

回答

相關問題