Webkit支持渐变过渡

Question

我想知道是否有人知道webkit何时支持渐变的转换？
例如,以下代码在Chrome 6中不起作用(假设渐变过渡是一个链接):

.grad-transition {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
     -webkit-transition: background-image .5s;
}
.grad-transition:hover {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}

Answer 1

试着做同样的事情.

截至目前,我认为不可能为渐变设置动画.

我正在使用一种解决方法.我没有为渐变设置动画,而是使用半透明渐变作为背景图像,然后为背景颜色设置动画.

#button
{
    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%, rgba(255, 255, 255, 0.9)),
    color-stop(100%, rgba(0, 0, 0, 0.6))
    );
}

#button:hover
{
   background-color: #353535;
}

我还在这里举了一些例子:http://tylergaw.com/www/lab/css-gradient-transition-sorta/

Answer 2

你也可以使用background-position来给出渐变正在改变的错觉,实际上它只是被移动了:http: //sapphion.com/2011/10/css3-gradient-transition-with-background-position/