Come eseguire un'animazione keyframe CSS3 una volta e solo quando viene attivata?

Question

Vorrei implementare un'animazione HTML5 che implichi un po 'di più del semplice spostamento di un elemento dal punto A al punto B. Ecco perché sto pensando di utilizzare i fotogrammi chiave anziché le transizioni. Tuttavia, voglio solo che l'animazione venga eseguita una volta e solo quando attivata.

Il problema è duplice: 1) Al termine dell'animazione, l'oggetto torna alla posizione iniziale. C'è un modo per farlo rimanere nella posizione finale fino a nuovo avviso? 2) C'è un modo per riavviare l'animazione in seguito da Javascript?

L'altra soluzione possibile che vedo sarebbe quella di concatenare alcune transizioni utilizzando l'evento onTransitionEnd.

Qual è la soluzione migliore qui considerando le prestazioni? Mi occupo solo di browser Webkit, inclusi i dispositivi mobili.

MODIFICA: in base al commento di @ Christofer-Vilander ho effettuato un JSfiddle, che in pratica fa ciò che volevo. Grazie!

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

aggiungere una classe nell'elemento HTML con Javascript, ed il css di animazione set di regole desiderato per questa classe . Utilizzare animation-fill-mode: forwards; per l'animazione da eseguire una volta. Quindi, rimuovere la classe dall'elemento per ricreare l'animazione onClick.