Webkit support for gradient transitions

问题:

Im wondering if anyone know when will webkit support transitions of gradients?
for example, the following code doesnt work in Chrome 6 (assuming grad-transition is a link):

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

回答1:

Trying to do the same thing.

As of right now I do not think it is possible to animate a gradient.

I'm using a workaround. Instead of animating the gradient, I'm using a semi-transparent gradient for the background-image and then animating the background color.

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

I also put up some examples here: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

回答2:

You can also use background-position to give the illusion that the gradient is changing, when in actual fact it's simply being moved: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

回答3:

It is possible to make a transition on gradients using a little hack:

The below code will set transparancy to 0.3 on the darkest color. The hover will set this color to another color. Since the transparancy can be transitioned it will generate the same effect.

I also added the not transitional version for mozilla and IE.

.menu li a {
  background-color: #ffffff; 
  background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3)));

  background: linear-gradient(left,#eeeeee, #ffffff);
  background: -moz-linear-gradient(180deg,  #eeeeee,  #ffffff);
}

.menu li a:hover {
  background-color: #006613;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;

  background: linear-gradient(left, #006613, #eeeeee);
  background: -moz-linear-gradient(180deg,  #006613,  #eeeeee);
}

回答4:

I asked this question awhile ago, you can see the responses I got by searching through my questions asked. They told me that you can't yet do this properly, but you can do it by setting the gradients on two different divs, then fading one div on top of the other to create the effect.

回答5:

I'm working on JS lib which makes a transition for gradients possible: It already can be used for linear gradients. Usage:

    var button = $('#button');
    var targetGradientString = 'linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)';
    var targetElement = $('#target');

    button.click( function() {
        targetElement.gradientTransition(targetGradientString, 1500, 60);
    });

github Demo