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/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…