CSS3过渡：在2个不同的渐变之间制作动画。包括jsfiddle

Question

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

我想在两个不同的渐变之间制作动画，在悬停时有一个淡入淡出。 我的例子显示了应该发生的事情，但它会立即发生，我希望它在它们之间消失。

仅供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编写此功能，或者更简单，在另一个上面放置一个渐变，然后设置不透明度的动画以模拟淡入淡出。