설정된 시간이 지나면 CSS 전환이 요소를 자동으로 숨길 수 있나요?

CSS 전환을 사용하여 요소 자동 숨기기

페이지 로드 후 5초 후에 요소가 사라지도록 할 수 있나요? jQuery 솔루션이 알려져 있지만 이 기사에서는 CSS 전환을 사용하여 동일한 효과를 얻는 방법을 살펴봅니다.

가능한가요?

예, 하지만 기존 방식은 아닙니다. . 일반적으로 전환은 표시, 크기 또는 오버플로와 같은 속성에 적용됩니다. 그러나 이러한 속성은 요소의 가시성과 공간 점유를 직접 제어합니다.

혁신적인 솔루션

이 제한을 우회하려면 대상 요소에 대한 애니메이션을 생성하십시오. 5초 후에 표시 여부를 숨김으로 전환합니다. 또한 문서 흐름에서 공간을 차지하지 않도록 높이와 너비를 0으로 설정하세요.

예 구현

CSS:

#hideMe {
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

HTML:

<div>

이 코드는 애니메이션을 설정합니다. 페이지가 로드된 후 5초 후에 요소를 0차원으로 축소합니다. 요소는 문서 흐름에서 위치를 유지하면서 숨겨집니다.

결론

요소 숨기기에 대한 기존 접근 방식은 직접 적용할 수 없지만 가시성 전환 및 0을 사용하여 요소를 숨깁니다. CSS 애니메이션과 함께 Dimensions는 지정된 시간 간격 후에 요소를 자동 숨기기 위한 혁신적인 솔루션을 제공합니다.

위 내용은 설정된 시간이 지나면 CSS 전환이 요소를 자동으로 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!