title: CSS3 Gradient flickers on hover
body: <p>I'm playing around with a CSS3 Gradient and trying to move it in on mouseover. As you can see from this <a href="http://jsfiddle.net/aR9YV/" rel="nofollow">jsFiddle</a>, the CSS gradient appears on <code>:hover</code>; however, it seems to flickers a few times. </p>
  
  <p>FYI, so far, this has been tested on <code>Chrome v30</code> / <code>Firefox v24</code> / <code>Safari v5.1</code>.</p>
  
  <p>Separately, both have turned out to be working solutions, but combined, I get the flickering effect.</p>
  
  <pre><code>nav li {
      width: 90px;
      padding-right: 15px;
      padding-left: 15px;
      height: 30px;
      border: 1px solid #000;
      float: left;
      list-style-type: none;
  
      background-position: -200px -200px;
      -webkit-transition: background 1s ease-out;
      -moz-transition: background 1s ease-out;
      -o-transition: background 1s ease-out;
      transition: background 1s ease-out;
  }
  
  nav li:hover {
      background-position: 200px 0;
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
      background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
      background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
      background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
      background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
      background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
  }
  </code></pre>
  
  <p>I've tried limiting the animation using <code>animation-iteration-count</code>, but as I've figured out, this only seems to work with animations and <code>@keyframes</code>. I've also read on a few different sites that 
  <code>@keyframes</code> don't yet support CSS Gradient animation.</p>