title: CSS Gradient Animate
body: <p>I'm trying to animate a CSS gradient as described <a href="https://stackoverflow.com/questions/10963059/jquery-animate-div-background-color-gradient">here</a> but I can't get it to work. As an example I've put together <a href="http://jsfiddle.net/geXgH/4/" rel="nofollow noreferrer">this</a> jsfiddle.</p>
  
  <p>As a overview, it seems that CSS transitions on gradients doesn't seem to work.</p>
  
  <pre><code>div#Machine {
      -webkit-transition: background 5s;
      -moz-transition: background 5s;
      -ms-transition: background 5s;
      -o-transition: background 5s;
      transition: background 5s;
      background: rgb(71, 234, 46);
      background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
      background: -webkit-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: -o-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: -ms-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f', GradientType=0);
  }
  div#Machine.doublewin {
      background: rgb(247, 247, 49);
      background: -moz-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 247, 49, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
      background: -webkit-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: -o-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: -ms-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
      background: linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f', GradientType=0);
  }
  </code></pre>
  
  <p>I'm using some javascript / jQuery to add / remove the "doublewin" class. When using the same code but using a solid background it works fine, as shown in the jsfiddle link.</p>
  
  <p>Is it actually possible to animate a CSS3 gradient or am I doing something wrong?</p>
  
  <p>Any help is greatly appreciated.</p>