title: CSS3 animation with gradients
body: <p>Is there really no way to animate a gradient-background with CSS?</p>
  
  <p>something like:</p>
  
  <pre><code>@-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)));
    }
  }
  </code></pre>
  
  <p><em>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.</em></p>