CSS에서 페이드 아웃 효과를 만들려고 할 때 내 슬라이드 애니메이션이 작동하지 않는 이유는 무엇입니까?

CSS3 전환: 페이드 아웃 효과

순수한 CSS를 사용하여 페이드 아웃 효과를 구현하려고 할 때 슬라이드 애니메이션이 왜 혼란스러울 수 있습니다. 작동하지 않을 것입니다. 그 이유는 다음과 같습니다.

페이드 아웃 효과의 핵심은 불투명도 속성을 전환하는 데 있습니다. 슬라이드 애니메이션에 사용되는 top 속성은 원하는 효과를 생성하지 않습니다.

CSS3 전환을 사용한 페이드 아웃 효과

다음은 페이드 아웃 효과를 구현하는 방법의 예입니다. CSS3 전환을 사용한 페이드 아웃 효과:

<code class="css">.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}</code>

이 클래스를 요소에 적용하면 2초에 걸쳐 점차 페이드 아웃됩니다.

추가 리소스:

• [CSS3 전환: fadeIn 및 fadeOut 같은 효과](https://css-tricks.com/css3-transition-fadein-fadeout/)

차이점 이해:

페이드 아웃 애니메이션과 슬라이드 애니메이션의 주요 차이점은 전환되는 속성에 있습니다. 페이드 아웃 효과의 경우 불투명도 속성이고 슬라이드 애니메이션의 경우 일반적으로 위쪽 또는 왼쪽과 같은 위치 속성입니다.

제공된 코드의 경우 애니메이션은 위쪽 속성을 변환하도록 설정됩니다. , 요소가 페이드 아웃되는 대신 화면 밖으로 이동합니다.

위 내용은 CSS에서 페이드 아웃 효과를 만들려고 할 때 내 슬라이드 애니메이션이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!