私はCSSアニメーションは、彼らが外にビューポート

Question

ているとき、私はanimate.cssライブラリを使用してCSSトランジション/アニメーションに大きく依存しているウェブサイトを持って停止する必要がありますCPUのボトルネックを避けてください。だから私は不思議に思っています：アニメーションがビューポートの外にあることを検出したときにCSSアニメーションを手作業で（JSを使用して）停止するか、ブラウザが自動的にそれらのアニメーションの処理を停止しますか？

ほとんどの私のアニメーションは、いくつかの時間間隔の間に要素にfadeInUpのようなクラスを追加/削除されます。ですから、私の質問は、これは、要素がビューポートの外にあるときにそれらのクラス（アニメーションを引き起こす）を追加すると、ブラウザに重大なオーバーヘッドが生じますか？ブラウザは、それらのアニメーションが表示されていないときに自動的に「一時停止」しますか？

Answer 1

私が見たことから、アニメーションは表示されていなくても実行し続けていると思います。したがって、表示されていない状態で一時停止したい場合は、一時停止したいと考えることができるのは、遅いコンピュータやオペレーティングシステムの場合だけですが、ほとんどの場合、これらのアニメーションはあまり集中的ではありません。あなたがそうするならば、ブラウザを実行するのはJSです。