CSS3 애니메이션 완성을 정확하게 제어하고 최종 프레임 이후 요소를 제거하려면 어떻게 해야 합니까?

CSS3 애니메이션 완성 제어

웹 개발 영역에서 CSS3 애니메이션은 사용자 경험을 향상시키는 강력한 도구가 되었습니다. 게다가, 최종 상태를 정밀하게 제어해야 하는 애니메이션을 디자인할 때 마지막 프레임에서 중지하는 것이 어려울 수 있습니다.

이 기사에서는 여러 부분으로 구성된 CSS3 애니메이션이 클릭 시 재생되는 시나리오에 대해 설명합니다. 화면에서 div를 제거하기 위한 마지막 부분입니다. 불행하게도 애니메이션은 계속해서 원래 상태로 되돌아갑니다. 이 문제를 해결하기 위해 우리는 두 가지 해결책을 모색합니다:

1. 마지막 프레임에서 애니메이션 고정:

마지막 프레임에서 애니메이션을 고정하려면(100% 완료) CSS 속성 animation-fill-mode:forwards;을 사용합니다. . 이 지시어는 애니메이션이 종료된 후에도 최종 애니메이션 상태를 유지하도록 브라우저에 지시합니다.

2. 애니메이션 후 Div 제거:

또는 div를 완전히 제거하려면 애니메이션이 재생된 후 JavaScript를 사용하여 DOM에서 요소를 제거할 수 있습니다. 이는 다음 순서로 달성할 수 있습니다.

document.getElementById("myDiv").addEventListener("animationend", function() {
  this.parentNode.removeChild(this);
});

애니메이션이 완료되면 "animationend" 이벤트가 트리거되어 div가 페이지에서 제거됩니다.

예:

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

#myDiv {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
}

이 예에서 ID가 "myDiv"인 div는 애니메이션을 거칩니다. 크기 조정 및 회전 변환으로 마무리됩니다. "animation-fill-mode:forwards;"를 설정하면 애니메이션 종료 후 최종 상태가 유지됩니다.

위 내용은 CSS3 애니메이션 완성을 정확하게 제어하고 최종 프레임 이후 요소를 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!