title: CSS transition with background gradient
body: <p>I'm learning about animations/transitions with CSS3, but in this code the transition don't worked... why?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="test"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#test {
      background-color: #333;
      background-image: -webkit-linear-gradient(top, #333, #666);
      width: 100px;
      height: 100px;
      -webkit-transition: background 1s linear;
  }
  
  #test:hover {
      background-image: -webkit-linear-gradient(top, #666, #999);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/LLRfN/" rel="noreferrer">http://jsfiddle.net/LLRfN/</a></p>