Webkit support for gradient transitions

Solution 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/

Solution 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/

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