CSS3 gradients cannot be animated as of now. There are a variety of tricks which involve the use of background-position or pseudo elements to fake an animation for gradients. But those methods require a lot of manual fine tuning and don't yield the desired results.
A cool trick @kushsolitary suggested to me was to breakdown the gradient into a background-color containing a static color and a background-image containing a translucent gradient and then animating the background color to implement animated gradients.
Most common gradients used by web designers can be broken down into an image and a color logically. They mostly contain a single color and a translucent white-black overlay.
In this demo, I have coded 7 different types of animated gradients. The method used is same but the implementation is different in every case. The different implementations make it easier to logically derive the kind of animated gradient you want.
I have used CSS3 animations in this demo, but this approach can be used with transitions as well to create hover effects and related stuff.