title: Animating a CSS gradient background on the hover event
body: <p>I have some menu items that are styled using a background gradient on hover using the following styling:</p>
  
  <pre class="lang-css prettyprint-override"><code>#sidebar ul li a:hover {
      background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
      background-image: -o-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
      background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
      background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
      background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
  
      background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.05, rgb(68,68,68)),
          color-stop(1, rgb(51,51,51))
      );
      color: #f0f0f0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
  }
  </code></pre>
  
  <p>My question is, is it possible to make the new background (defined by gradients) slide in from the right using CSS3 transitions or animations? Or will I have to resort to using a sprite image or Javascript?</p>