method of animating the webkit gradient using either css3 or javascript?

Question

Basically I have set up a CSS3 gradient and would like to transition one of its colours to be larger on hover but im unsure how to achieve this.

My fiddle at the moment goes a little crazy on hover then kind of sizes to the correct size, I would rather the transition be a lot smoother with the blue area just growing instead of flying off the page. If anyone could offer some advice that would be great.

Fiddle: http://jsfiddle.net/VQaGh/2/

Answer 1

You don't need to transition the background-position , just the background-size in this case - like this http://jsfiddle.net/VQaGh/4/

And why are you using the ancient webkit syntax? See proper syntax .

Also, you could check this animated gradients demo I did a while ago.