title: Webkit Keyframes on Hover - Prevent Previous Animation
body: <p>I have an element that I have a set of @-webkit-keyframes to animate in. On page load, these keyframes run, and the intro looks great.</p>
  
  <p>Next, I have a second set of @-webkit-keyframes on hover and set to repeat, so on hover, that element has a looping animation. That also works great.</p>
  
  <p>However, the instant I move the mouse away from the element, the first (intro) set of keyframes gets run again. I don't want it to run after it first runs. Is there an easy way to prevent this in CSS?</p>
  
  <p>Minimal example of what I have</p>
  
  <pre><code>#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */
  #e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */
  </code></pre>
  
  <p>Also, can someone with 1500+ reputation edit the tags and add the webkit-animation tag? I can't believe it hasn't been created yet… :\</p>