title: How to animate gradient background smoothly
body: <p>I want to achieve an effect than when the user hovers over a div, it's background color turns into a gradient that smoothly switches from one corner to the other, repeatedly, using purely CSS.</p>
  
  <p>The effect I want to achieve, trying to put it more into words, is that the darker part of the background (the one with 0.9 opacity) slides from one corner to the other repeatedly as long as the cursor remains above the element.</p>
  
  <p>What is actually happening is that the background jumps from one state to the other. Where am I going wrong? How can I get this to be an animated, smooth effect?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    width: 200px;
    height: 200px;
    background-color: rgba(215, 54, 92, 0.7);
  }
  @keyframes test_hover {
    from {
      background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Firefox 3.6 to 15 */
      background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* Standard syntax (must be last) */
    }
    to {
      background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Firefox 3.6 to 15 */
      background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* Standard syntax (must be last) */
    }
  }
  #test:hover {
    cursor: pointer;
    animation-name: test_hover;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="http://jsfiddle.net/s5L88bho/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>This question have been referenced to be a duplicate from <a href="https://stackoverflow.com/questions/20843803/background-image-gradient-not-animating">here</a>, but I think it is not. For a start, there is no code in that question which makes it difficult to understand. Also, in the answer to that question he uses a transition, but I do not want a transition because it is only applied once, I want my animation to be constantly repeated while the user is hovering the div. </p>