8
アイテムをポイントAからポイントBに移動するだけではなく、ちょっとだけ、HTML5アニメーションを実装したいと思います。そのため、移行ではなくキーフレームの使用を検討しています。しかし、アニメーションを一度だけ実行し、トリガされたときにのみ実行します。CSS3のキーフレームアニメーションを一度実行するには、トリガされたときだけですか？
問題は2倍です。 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;
}
animation-fill-modeを使用できるはずです。アニメーションの終了状態を維持する。どのようにアニメーションを再びトリガーしたいですか？ Onclick、ホバー、または一定時間後の自動？ –
私はonClickおよび/またはtimerの両方を使用して起動したいと考えています。 –
ちょうどあなたの編集に気づいた、私が助けることができてうれしい！ –