최종 프레임에서 CSS3 애니메이션을 어떻게 중지할 수 있나요?

최종 프레임에서 CSS3 애니메이션 중지

CSS3 애니메이션 작업 시 애니메이션이 끝날 때 애니메이션을 영구적으로 정지하는 것이 바람직할 수 있습니다. 마지막 프레임입니다. 이는 요소를 화면 밖으로 이동시키는 애니메이션에 특히 유용할 수 있습니다.

이를 달성하는 한 가지 방법은 animation-fill-mode 속성을 활용하는 것입니다. 앞으로 설정하면 애니메이션 주기가 완료된 후에도 요소가 마지막 애니메이션 프레임의 모양을 유지합니다.

예를 들어 "colorchange"라는 키프레임이 있는 지정된 애니메이션에서:

@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); }
}

마지막 프레임에서 애니메이션을 영구적으로 중지하려면 animation-fill-mode:forwards를 추가하세요. 애니메이션 요소에:

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

이렇게 하면 애니메이션이 완료된 후 요소의 크기가 0.5로 유지되고 5도 회전된 후 100% 키프레임에 지정된 최종 위치로 변환됩니다.

위 내용은 최종 프레임에서 CSS3 애니메이션을 어떻게 중지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!