javascript - 이상한 문제를 발견했습니다. 탭을 닫으면 제가 작성한 CSS 애니메이션이 자동으로 일시중지됩니다.

Question

이상한 문제를 발견했습니다. 제가 작성한 CSS 애니메이션이 탭을 닫으면 자동으로 일시정지되고, 탭을 펼치면 계속 재생됩니다.
움직이는 효과를 내기 위해 배경이미지를 사용했습니다. 이런 이유와 관련이 있나요?

Answer 1

탭을 닫은 후 요소를 display: none로 설정하면 요소가 문서 흐름에 속하지 않으므로 CSS로 렌더링되지 않으며 애니메이션이 실행되지 않습니다.

이러한 경우에는 접은 후 opacity或者visibility를 사용하여 숨기는 것이 좋습니다.