CSS3 animasyon animasyonu nasıl ve ne zaman tetiklendiğinde bir kez nasıl çalıştırılır?

Question

Bir öğeyi A noktasından B noktasına taşımadan biraz daha fazlasını içeren bir HTML5 animasyonu uygulamak istiyorum. Bu yüzden geçişler yerine anahtar kareleri kullanmayı düşünüyorum. Ancak, sadece animasyonu bir kez ve sadece tetiklendiğinde çalıştırmayı istiyorum.

Sorun iki yönlüdür: 1) Animasyon bittiğinde, öğe başlangıç ​​konumuna geri döner. Bir sonraki duyuruya kadar son pozisyonda kalmasını sağlamanın bir yolu var mı? 2) Animasyonu daha sonra Javascript'ten yeniden başlatmanın bir yolu var mı?

Gördüğüm diğer olası çözüm, onTransitionEnd olayını kullanarak birkaç geçişi zincirlemek olacaktır.

Performans göz önünde bulundurularak burada en iyi çözüm nedir? Sadece mobil cihazlar dahil olmak üzere Webkit tarayıcılarını hedefliyorum.

DÜZENLEME: @ Christofer-Vilander tarafından yapılan yoruma dayalı olarak, temelde istediğimi yapan bir JSfiddle yaptım. Teşekkürler!

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

Javascript ile html elemanı bir sınıf ekleyin ve bu sınıf için istenilen css animasyon kural setleri . Animasyonun bir kez çalışması için animation-fill-mode: forwards; kullanın. Ardından, animasyonu tekrar çalıştırmak için sınıfı öğe içinden kaldırın.