How to run a CSS3 keyframe animation once, and only when triggered?

Question

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.

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?

The other possible solution I see would be to chain a few transitions using the onTransitionEnd event.

What is the best solution here considering performance? I am only targeting Webkit browsers, including mobile.

EDIT: based on the comment by @Christofer-Vilander I made a JSfiddle, which basically does what I wanted. Thanks!

HTML:

<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>

Javascript:

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');
});

CSS:

.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;
}

Answer 1

Add a class in the html element with Javascript, and the desired css animation ruleset for this class. Use animation-fill-mode: forwards; for the animation to run once. Then, remove the class from the element to re-run animation onClick.