CSS - On hover moving image littlebit left, if not hovered then back to original position
<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>