如何運行一次CSS3關鍵幀動畫，並且僅在觸發時才運行？

我想實現一個HTML5動畫，不僅僅是將一個項目從A點移動到B點，這就是爲什麼我正在考慮使用關鍵幀而不是轉換。不過，我只想讓動畫運行一次，並且只在觸發時才運行。如何運行一次CSS3關鍵幀動畫，並且僅在觸發時才運行？

問題是雙重的： 1）當動畫結束時，項目返回到其開始位置。有沒有辦法讓它停留在最終位置，直到另行通知？ 2）有沒有辦法從Javascript重新開始動畫？

我看到的另一種可能的解決方案是使用onTransitionEnd事件鏈接幾個轉換。

這裏考慮性能的最佳解決方案是什麼？我只針對Webkit瀏覽器，包括手機。

編輯：基於@ Christofer-Vilander的評論我做了一個JSfiddle，它基本上做我想要的。謝謝！

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

來源

2013-10-25 Per Quested Aronsson

你應該可以使用animation-fill-mode：forwards;保持動畫的結束狀態。你想如何再次觸發動畫？ Onclick，懸停或在一段時間後自動？ –

我想用onClick和/或定時器啓動它。 –

剛注意到你的編輯，很高興我能幫忙！ –

添加類使用JavaScript的HTML元素，這個類所需的CSS動畫的規則集。使用animation-fill-mode: forwards;使動畫運行一次。然後，從元素中移除類以重新運行onClick動畫。

來源

2014-05-01 18:41:34 katsampu

如何運行一次CSS3關鍵幀動畫，並且僅在觸發時才運行？

回答

相關問題