CSS3 アニメーションの再開

ユーザー操作時に CSS3 アニメーションを復活させるのは一般的なタスクです。アニメーション要素を削除して再挿入することは効果的であるように見えますが、不必要な複雑さが生じます。リフローの力を利用してアニメーションをシームレスにリセットすることで、より洗練されたソリューションが生まれます。

リフローは、ドキュメント構造の再フォーマットと再描画のプロセスであり、アニメーションのタイムラインを中断することなくスタイルを変更するための便利なメカニズムを提供します。アニメーション プロパティを一時的に「none」に設定してからリフローをトリガーすると、ブラウザーは進行中のアニメーションを無視する信号を受け取ります。これにより、その後のスタイルの変更がすぐに有効になり、アニメーションが効果的に再開されます。

次の JavaScript スニペットを考えてみましょう。

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

この関数がトリガーされると、「アニメーション化された」要素のアニメーションを一時停止し、ブラウザーの再描画を強制して、アニメーション プロパティを元の状態に戻します。このアプローチは、アニメーション割り当ての遅延や連鎖を回避することで、アニメーションのリセット プロセスを簡素化し、スムーズな視覚エクスペリエンスを保証します。