title: css3 :hover wont work after animation
body: <p>I have a DIV which changes bgcolor to blue when :hover.
  Button click adds class which animates bgcolor to green. But now :hover wont work (bgcolor wont change to blue).</p>
  
  <p>Why?</p>
  
  <p><a href="http://jsfiddle.net/EstSiim/me7t055c/" rel="noreferrer">http://jsfiddle.net/EstSiim/me7t055c/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;&lt;/div&gt;
  &lt;button class="animate-btn"&gt;Animate&lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box {
          background-color: red;
          width: 200px;
          height: 200px;
      }
      .box:hover {
          background-color: blue;
      }
  
      .trigger-bg-change {
          -webkit-animation: bg-change 1s ease 0 1 forwards;
          animation: bg-change 1s ease 0 1 forwards;  
      }
  
      @-webkit-keyframes bg-change {
          0% {background-color:red;}
          100% {background-color:green;}
      }
      @-keyframes bg-change {
          0% {background-color:red;}
          100% {background-color:green;}
      }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
          $('.animate-btn').on('click', function() {
              console.log('hey');
              $('.box').addClass('trigger-bg-change');
          });
  });
  </code></pre>