title: animating one color of a gradient continuously with css
body: <p>saw some similar questions here but can't seem to figure out this one in particular.</p>
  
  <p>I have a gradient that's black on top and blue on the bottom. I want the blue to fade to several different colours on a continuous loop, but the black to remain in place. like this: <a href="http://i.stack.imgur.com/6k9EN.gif" rel="nofollow">http://i.stack.imgur.com/6k9EN.gif</a></p>
  
  <p>saw some demos like <a href="https://stackoverflow.com/questions/14785853/sunrise-and-sunset-is-not-smooth-with-css3-animation-and-linear-gradient">this one</a> where the gradient animates continuously but it's just a large gradient being shifted vertically with keyframes which wouldn't work for me. Wondering if anyone could recommend a solution. </p>
  
  <p>Here's the unanimated code so far: <a href="http://jsfiddle.net/ssccdd/9qA3L/" rel="nofollow">http://jsfiddle.net/ssccdd/9qA3L/</a></p>
  
  <pre><code>body{
        background: -moz-linear-gradient(top, #000000 80%, #3300FF 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
        background: -webkit-linear-gradient(top,  #1e5799 80%,#3300FF 100%);
        background: -o-linear-gradient(top,  #000000 80%,#3300FF 100%);
        background: -ms-linear-gradient(top,  #000000 80%,#3300FF 100%);
        background: linear-gradient(to bottom,  #000000 80%,#3300FF 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3300FF',GradientType=0 );
        background-attachment: fixed;
  </code></pre>
  
  <p>}</p>