CODEWITHSUNDEEP
javascriptjquerycsswebkit
styler
styler

Reputation: 16481

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

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/

Upvotes: 0

Views: 210

Answers (1)

Ana
Ana

Reputation: 37169

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.

Upvotes: 2

Related Questions