Comment faire pour exécuter un CSS3 animation avec des images clés une fois, et seulement lorsqu'il est déclenché?

Je tiens à mettre en œuvre une animation HTML5 qui implique un peu plus que le simple fait de déplacer un élément à partir d'un point a à Un point B. C'est pourquoi je m'intéresse à l'aide d'images clés, plutôt que de transitions. Cependant, je veux juste que l'animation d'exécuter une seule fois, et seulement quand il est déclenché.

Le problème est double:
1) Lorsque l'animation est terminée, le point revient à sa position de départ. Est-il un moyen de le faire rester à la position de fin, jusqu'à nouvel avis?
2) Est-il un moyen de redémarrer l'animation plus tard à partir de Javascript?

L'autre solution que je vois serait de la chaîne a quelques transitions à l'aide de la onTransitionEnd événement.

Quelle est la meilleure solution compte tenu de la performance? Je suis seulement cibler les navigateurs Webkit, y compris mobile.

EDIT: basé sur le commentaire de @Christofer-Vilander j'ai fait un JSfiddle, qui fait ce que je voulais. Merci!

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

OriginalL'auteur Per Quested Aronsson | 2013-10-25