title: CSS - On hover moving image littlebit left, if not hovered then back to original position
body: <p>I've been trying doing it, but it doesn't work. It should move that image left 10px, but it doesn't. That div has <code>left</code> css inside it, I think it's because of that. I tried <code>!important</code>, but it didn't work. </p>
  
  <p>Here's JSFiddle: <a href="https://jsfiddle.net/jwbvxhv0/1/" rel="nofollow">https://jsfiddle.net/jwbvxhv0/1/</a></p>
  
  <pre><code>$(".seen").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
    $(this).removeClass("animated")  
  })
  
  $(".seen").hover(function(){
    $(this).addClass("animated");        
  })
  </code></pre>
  
  <hr>
  
  <pre><code>@-webkit-keyframes example {
    0% {
      left: 0px;
    }
    25% {
      left: 10px ! important;
    }
    100% {
      left: 0px;
    }
  }
  
  .seen.animated {
    position: relative;
    -webkit-animation-name: example;
    -webkit-animation-duration: 2s;
  }
  </code></pre>