title: How can I change a css property after it has been @keyframe animated?
body: <p>I'm fading in some buttons with @keyframe animation from opacity: 0 to opacity: 1.</p>
  
  <pre><code>div{
      opacity: 1;
      animation: fadeIn 1s forwards;    
      -webkit-animation: fadeIn 1s forwards;
  }
  
  @-webkit-keyframes fadeIn {
      0%{
          opacity: 0;
      }100%{
          opacity: 1;   
      }
  }
  
  @keyframes fadeIn {
      0%{
          opacity: 0;
      }100%{
          opacity: 1;   
      }
  }
  
  div:hover{
      opacity: .5 !important; /* THIS DOES NOT HAPPEN BECAUSE THE OPACITY WAS ANIMATED */
      color: red;
  }
  </code></pre>
  
  <p>On :hover, I'd like to change the opacity to .5 but it appears that after a property is animated using @keyframe, it can't be changed. </p>
  
  <p>Simple example: 
  <a href="http://jsfiddle.net/Lzcedmuq/3/" rel="noreferrer">http://jsfiddle.net/Lzcedmuq/3/</a></p>
  
  <hr>
  
  <p>PS: In the real web-app, I am also scaling the buttons in so the fix I need is more than just for opacity. I need to be able to change any property that has been animated. I can do it with JS hackery but I don't want to.</p>