animate CSS3 gradient-positions using jQuery

Question

Is it possible to animate the position of a CSS3-gradient-color using jQuery?

I\'d like to animate from this

background: -moz-linear-gradient(top, #F         


        

Answer 1

You can make the gradient twice as big (meaning incorporate the first gradient in the first 50%, and the second gradient in the last 50%) as it needs to and use this code:

-webkit-background-size: 200%;
-moz-background-size: 200%;
-o-background-size: 200%;
-ms-background-size: 200%;
background-size: 200%;

on the initial item and. Not all the prefixes will work, but I do it for compatibility if they add it later

background-position:bottom;

On the hover