CSS3過渡：在2個不同的漸變之間進行動畫處理。含jsfiddle

Question

http://jsfiddle.net/nicktheandroid/PXdXr/1/

我想在2個不同的漸變之間動畫，有一個褪色懸停。 我的例子顯示應該發生什麼，但它立即發生，我希望它們之間淡入淡出。

僅供參考這裏SO（這是所有在的jsfiddle）：

.outerBorder { 
    display:inline-block; 
    /*border: 3px solid #4d4d4d;*/ 

    background: #4d4d4d; /* Old browsers */ 
background: -moz-linear-gradient(top, #4d4d4d 0%, #0e0e0e 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* W3C */ 



-webkit-transition: background 1000ms ease-in-out; 
-moz-transition: background 1000ms ease-in-out; 
-o-transition: background 1000ms ease-in-out; 
transition: background 1000ms ease-in-out; 

} 

.outerBorder:hover { 
    display:inline-block; 
    /*border: 3px solid #4d4d4d;*/ 

background: #d6f9ff; /* Old browsers */ 
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6f9ff), color-stop(100%,#9ee8fa)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* W3C */ 

} 

.innerBox { 
    width:300px; 
    height:200px; 
    margin:5px; 
    background-color:#fff; 
} 

Answer 1

正如裏克所說，目前還沒有支持漸變動畫。

但是，你仍然可以申請在CSS過渡的頂部半透明漸變，然後只是動畫的背景色（效果會非常類似）：

.outerBorder { 
    display:inline-block; 
    /*border: 3px solid #4d4d4d;*/ 
    -webkit-transition: background-color 1000ms ease-in-out; 
    -moz-transition: background-color 1000ms ease-in-out; 
    -o-transition: background-color 1000ms ease-in-out; 
    transition: background-color 1000ms ease-in-out; 
    background-color: #4d4d4d; 
} 

.outerBorder:hover { 
    background-color: #b4d7dd; 
} 

.innerBox { 
    width:300px; 
    height:200px; 
    padding:15px; 
    background-color:#fff; 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255, 0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0); /* IE6-9 */ 
    background: linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */ 
} 

的jsfiddle：http://jsfiddle.net/NAVYX/

Answer 2

沒有漸變動畫支持呢。在使用jQuery時，您可以使用cssHooks或更簡單的方式編寫此功能，並在另一個頂部使用一個漸變，然後爲不透明度設置動畫以模擬漸變。