Wie man ein CSS3-keyframe-animation einmal, und nur, wenn er ausgelöst wird?

Ich würde gerne die Implementierung einer HTML5-animation umfasst ein bisschen mehr als nur ein Element verschieben von Punkt A zu Punkt B. Das ist, warum ich überlege, mithilfe von keyframes eher als übergänge. Ich möchte jedoch nur die animation einmal ausgeführt, und nur, wenn er ausgelöst wird.

Das problem ist zweierlei:
1), Wenn die animation abgeschlossen ist, wird der Gegenstand zurück in die Ausgangsposition. Gibt es einen Weg, es bleiben am Ende position bis auf weiteres?
2) gibt es eine Möglichkeit, um die animation zu starten später von Javascript aus?

Die andere mögliche Lösung, die ich sehe, wäre die Kette ein paar übergänge mit den onTransitionEnd Veranstaltung.

Was ist hier die beste Lösung in Anbetracht der Leistung? Ich bin nur auf Webkit-Browsern, einschließlich mobile.

EDIT: basierend auf dem Kommentar von @Christofer-Vilander, machte ich einen JSfiddle, die im Grunde das macht, was ich wollte. Danke!

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