title: CSS background (gradient) transition not working
body: <p>The CSS transition on my a tag isn't fading in and out, its just like there's no transition at all! I tried using <code>transition: background 300ms ease-in-out;</code> too but still no luck</p>
  
  <p>CSS:</p>
  
  <pre><code>.FeatureRow a{
      padding: 10px;
      display: block;
      width: 260px;
      height: auto;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-box-shadow: 0px 4px 8px #f5f5f5;
      -moz-box-shadow: 0px 4px 8px #f5f5f5;
      box-shadow: 0px 4px 8px #f5f5f5;
      background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
      background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
      background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
      background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
      background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
      background-repeat: repeat-x;
      transition: all 300ms ease-in-out;
      -webkit-transition: all 300ms ease-in-out;
      -moz-transition: all 300ms ease-in-out;
      -ms-transition: all 300ms ease-in-out;
      -o-transition: all 300ms ease-in-out;
  }
  .FeatureRow a:hover{
      background-image: -moz-linear-gradient(top,#C00,#C0F);
      background-image: -webkit-gradient(linear,0 0,0 100%,from(#C00),to(#C0F));
      background-image: -webkit-linear-gradient(top,#C00,#C0F);
      background-image: -o-linear-gradient(top,#C00,#C0F);
      background-image: linear-gradient(to bottom,#C00,#C0F);
  }
  </code></pre>