title: How to run a CSS3 keyframe animation once, and only when triggered?
body: <p>I would like to implement an HTML5 animation that involves a bit more than just moving an item from point A to point B. That's why I am considering using keyframes rather than transitions. However, I just want the animation to run once, and only when triggered.</p>
  
  <p>The problem is twofold: 
  1) When the animation is finished, the item returns to its start position. Is there a way to make it stay at the end position until further notice?
  2) Is there a way to restart the animation later from Javascript?</p>
  
  <p>The other possible solution I see would be to chain a few transitions using the onTransitionEnd event.</p>
  
  <p>What is the best solution here considering performance? I am only targeting Webkit browsers, including mobile.</p>
  
  <p>EDIT: based on the comment by @Christofer-Vilander I made a <a href="http://jsfiddle.net/perqa/Z4Xhp/">JSfiddle</a>, which basically does what I wanted. Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="start"&gt;Start&lt;/button&gt; &lt;button id="reset"&gt;Reset&lt;/button&gt;
  &lt;br/&gt;
  &lt;div id="ball" class="ball"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>document.getElementById('start').addEventListener('click', function(e) {
      document.getElementById('ball').classList.add('remove');
  });
  
  document.getElementById('reset').addEventListener('click', function(e) {
      document.getElementById('ball').classList.remove('remove');
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ball {
      width:100px;
      height:100px;
      border-radius:100px;
      background-color:darkred;
      position:absolute;
      top:100px;
      left:200px;
  }
  
  @-webkit-keyframes slide {
      from { top:100px; left:200px; }
      to { top:100px; left:-100px; }
  }
  
  .remove {
      animation: slide 1s linear;
      -webkit-animation: slide 1s linear;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-fill-mode: forwards;
  }
  </code></pre>