CSS3 アニメーションを効果的に再起動するにはどうすればよいですか?

CSS3 アニメーションを効果的に復元する

CSS3 アニメーションを再開するのは困難な作業となる場合があります。この質問では、残り時間を表すためにscaleY(0)変換を使用してバーがアニメーション化されており、アニメーションをscaleY(0)に再開する前にアニメーションをscaleY(1)にリセットする必要がある状況を調べます。

最初にscaleY(1)を設定してアニメーションをリセットしようとしたが効果がないことが判明しましたが、この質問では、アニメーション要素のクローンを削除して再挿入してアニメーションを再開するという興味深い解決策が示されています。ただし、この方法は最も効率的または単純なアプローチではない可能性があります。

要素の取り外しと再挿入に依存する代わりに、より現実的な解決策は、リフロー技術を利用することです。この手法では、アニメーション スタイルを一時的に削除し、リフローをトリガーして変更を適用し、アニメーション スタイルをリセットします。次の JavaScript 関数

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null;
}

をコードに組み込み、イベント (ボタンのクリックなど) でこの関数をトリガーすると、アニメーションを効果的にリセットできます。このアプローチは、CSS3 アニメーションを再開するためのシンプルかつ効率的な方法を提供します。

以上がCSS3 アニメーションを効果的に再起動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。