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

CSS3 アニメーションの再起動: 簡略化

CSS3 アニメーションの世界では、アニメーションを再起動する必要があるシナリオに遭遇することは珍しくありません。要求。これを実現するにはさまざまなアプローチがありますが、好奇心を刺激する手法の 1 つは、アニメーション要素を削除して再挿入する手法です。機能的ではありますが、最適化の余地が残されています。

合理化された方法

ありがたいことに、CSS3 アニメーションを再起動する、よりエレガントで効率的な方法があります。つまり、リフローを利用して強制的に更新します。要素のスタイルに合わせます。アニメーション スタイルを一時的に削除し、リフローをトリガーしてからアニメーションを元に戻すことで、不必要な複雑さを導入することなく効果的にアニメーションをリセットできます。

実際の実装

JavaScript は次のとおりです。このアプローチを示す関数:

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

この関数に付随して CSS を定義します以下に示すように、アニメーション化された要素とキーフレーム アニメーションのルール:

#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; }
}

最後に、HTML マークアップを含めます:

<div>

このアプローチでは、「」をクリックするたびにアニメーションが効果的に再開されます。 「リセット」ボタンを使用すると、複雑なタイムアウトや要素の操作が不要になります。

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