CSS3에서 페이드아웃 효과를 얻는 방법: 키프레임 애니메이션과 전환?

CSS3 전환 - 페이드 아웃 효과

CSS3에서는 키프레임 애니메이션을 사용하여 페이드 아웃 효과를 얻을 수 있습니다. 그러나 원하는 효과를 얻으려면 애니메이션 설정이 올바르게 구성되었는지 확인하는 것이 중요합니다.

제공된 코드에서는 상단 속성이 애니메이션화되어 요소가 수직으로 이동하기 때문에 슬라이드업 애니메이션이 작동하지 않습니다. 페이지 밖으로. 페이드 아웃 효과를 얻으려면 대신 불투명도 속성에 애니메이션을 적용해야 합니다. 업데이트된 코드 버전은 다음과 같습니다.

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

또는 CSS3 전환을 사용하는 더 간결한 접근 방식을 사용할 수 있습니다.

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

이 접근 방식을 사용하여 요소를 페이드 아웃하려면 다음을 추가하면 됩니다. 숨겨진 클래스를 요소로:

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

이렇게 하면 요소가 2초에 걸쳐 불투명도: 0으로 전환되어 페이드 아웃 효과가 생성됩니다. visible: hide는 지연과 함께 추가되므로 요소가 숨겨지기 전에 페이드 아웃 애니메이션이 완료될 수 있습니다.

위 내용은 CSS3에서 페이드아웃 효과를 얻는 방법: 키프레임 애니메이션과 전환?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!