CSS3 アニメーションをジッターなしでスムーズに再開するにはどうすればよいですか?

CSS3 アニメーションをシームレスに再起動する方法

クリックなどのトリガーで再起動する必要がある CSS3 アニメーションがある場合は、次のようにします。ジレンマに直面します。継続的にスケーリングを行ったり来たりすると、遅延と複雑さが生じる可能性があります。アニメーション要素を削除して再挿入することは機能しますが、より洗練されたソリューションを検討する価値があります。

幸いなことに、スムーズなリセットを実現できるリフローを使用する手法があります。アニメーションを一時的に無効にし、リフローを強制してから再度有効にすると、遅延や中断を生じることなくアニメーションを効果的に再開できます。その仕組みは次のとおりです。

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none'; // Temporarily disable animation
  el.offsetHeight; // Force reflow
  el.style.animation = null; // Re-enable animation
}

このアプローチでは、ブラウザーの動作を利用して、特定のプロパティが変更されたときにドキュメント フロー (リフロー) を再計算します。アニメーションを無効にして再度有効にすると、ブラウザにアニメーション プロパティが強制的に再初期化され、実質的にブラウザが再起動されます。

この手法は jQuery や Move.js に限定されないことに注意してください。あらゆる CSS アニメーションで使用できます。そのため、次回 CSS アニメーションを再開する必要がある場合は、シームレスで効率的なソリューションとして、このリフローベースの方法の使用を検討してください。

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