CSS3 전환: 페이드 아웃 효과

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

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

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

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

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

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

추가 리소스:

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

차이점 이해:

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

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