Animation CSS3过渡：在两个不同的渐变之间设置动画。包括jsfiddle

我想动画之间的2个不同的梯度，有一个淡入悬停。 我的例子显示了应该发生什么，但它会立即发生，我希望它在它们之间消失

这里仅供参考（这些都在JSFIDLE中）：

---

目前还不支持渐变动画。在使用jQuery时，您可以使用一个或更简单的方法编写此功能，将一个渐变置于另一个之上，然后设置不透明度动画以模拟淡入淡出。

如Rick所述，目前还不支持渐变动画

但是，您仍然可以在CSS过渡顶部应用半透明渐变，然后仅设置背景颜色的动画（效果将非常相似）：

---

JSFIDLE:

我怀疑现在是否支持渐变色动画。一年半后，IE10是第一个支持渐变色动画的浏览器。

.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;
}

.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 */
}