CSS 전환: 지연 후 자동으로 요소 숨기기
특정 시간 간격 후에 웹페이지에서 요소를 숨기는 방법은 다양합니다. jQuery는 간단한 솔루션을 제공하지만 CSS 전환은 동일한 결과를 얻기 위한 혁신적인 대안을 제공합니다.
접근 방식:
다음과 같은 속성에 직접 애니메이션을 적용하는 CSS 전환의 한계에도 불구하고 디스플레이에서는 애니메이션을 활용하고 요소를 조작하여 요소 숨기기를 시뮬레이션할 수 있습니다. 가시성.
구현:
Fiddle:
다음 바이올린은 CSS 구현을 보여줍니다.
html, body { height:100%; width:100%; margin:0; padding:0; } #hideMe { animation: cssAnimation 0s ease-in 5s forwards; animation-fill-mode: forwards; } @keyframes cssAnimation { to { width:0; height:0; overflow:hidden; } }
<div>
이 기술은 지정된 시간 간격이 지나면 요소를 효과적으로 숨겨 요소가 화면의 보이는 공간을 차지하지 않도록 합니다. 페이지.
위 내용은 CSS 전환을 사용하여 지연 후 요소를 자동으로 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!