タイムアウトを使用せずに CSS3 アニメーションを効率的に再起動するにはどうすればよいですか?

CSS3 アニメーションの再起動の再検討: 代替アプローチの公開

CSS3 アニメーションの再起動は、特に要素のスケールを復元してアニメーションを元の状態に戻そうとする場合に課題が生じる可能性があります。 。要素を削除して再挿入することで回避策は得られますが、最も効率的な解決策ではない可能性があります。

より洗練されたアプローチには、リフローを利用してタイムアウトに依存せずに変更を適用することが含まれます。次の JavaScript 関数は、この手法を示しています。

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

以下の CSS および HTML と組み合わせて、この関数により、クリック時にシームレスなアニメーションのリセットが可能になります。

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div>

Byリフローをトリガーすると、複雑な遅延やタイミングを必要とせずにアニメーションがリセットされます。このアプローチは、CSS3 アニメーションを再起動するためのクリーンで効率的なソリューションを提供します。

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