CSS transition with background gradient - animation

Question

I'm learning about animations/transitions with CSS3, but in this code the transition don't worked... why?
HTML:
<div id="test">
</div>
CSS:
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
http://jsfiddle.net/LLRfN/

Answer 1

This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:
Here is a generator
Here is an explanation
edit
Sorry I didn't realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.
Here is a good article on how to get it to work with a little bit of a hack
http://nimbupani.com/some-css-transition-hacks.html

Answer 2

its working fine on me. have you wrapped the css file with tag?
<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>

Answer 3

It worked for me, Also I can point you to the CSS3 playground where you can check it on the fly CSS3 Playground

Answer 4

Gradient transition can by done with little bit of "cheating". I am definitely not pro in css stuff (and I am new here so don't hate me fast :D ), but just place to divs on top of each other, one with opacity 1 and second with 0.
(Each div has set different gradients) On hover, change opacity from 1 to 0 and vice versa.
Set timing function and however these divs are placed on each other z-index property do the rest.
(Optimized for Safari) Maybe rookie way, but this works (surprisingly) perfectly:
#divgradient1
{
z-index:-1;
height:100px;
background: -webkit-linear-gradient(90deg, red, blue);
background: -o-linear-gradient(90deg, red, blue);
background: -moz-linear-gradient(90deg, red, blue);
background: linear-gradient(90deg, red, blue);
opacity:1;
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index ;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient1:hover{
z-index:-1;
opacity:0;
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient2:hover{
opacity:1;
z-index:2;
background: -webkit-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient2
{
z-index:1;
opacity:0;
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
and whatever-it-should-look-like divs:
<div id="divgradient1" style="position:absolute;width:100px;"></div>
<div id="divgradient2" style="position:absolute;width:100px;"></div>