CSS3 animation with gradients [duplicate]

Question

Is there really no way to animate a gradient-background with CSS?

something like:

@-webkit-keyframes pulse {   0% {     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));   }   50% {     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));   }   100% {     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));   } } 

I know, for Safari 5.1+ and Chrome 10+ there is a new gradient-syntax, but for now, I have to stick with the old one for this project.

Answer 1

Transitions are not supported yet on webkit gradients. It's in the spec, but it doesn't work yet.

(p.s. if you're doing color transitions only - you may want to check out -webkit-filters - which do animate!)

Update: gradient transitions apparently do work in IE10+