javascript - 奇妙な問題が見つかりました。タブを閉じると、作成した CSS アニメーションが自動的に一時停止されました。

Question

奇妙な問題が見つかりました。私が作成した CSS アニメーションは、タブを閉じると自動的に一時停止し、タブを展開すると再生を続けました。
モーション効果を出すために背景画像を動かして使っているのですが、これと関係があるのでしょうか？

Answer 1

タブを閉じた後に要素を display: none に設定すると、要素はドキュメント フローに属さないため、CSS によってレンダリングされず、アニメーションは実行されません。

その場合はopacity或者visibilityを折り畳んで隠すのがおすすめです。