CSS3 애니메이션을 마지막 프레임에 유지하려면 어떻게 해야 합니까?

마지막 프레임에서 CSS3 애니메이션 중지

애니메이션이 완료된 후 애니메이션 요소가 원래 상태로 돌아가는 것을 방지하려면 다음을 수행하세요. animation-fill-mode 속성을 사용하세요. 이 속성은 애니메이션이 끝난 후 요소의 동작을 제어합니다.

해결책:

마지막 프레임(100%)에서 애니메이션을 중지하려면 값을 지정합니다. animation-fill-mode 속성을 전달합니다. 이렇게 하면 애니메이션이 완료된 후 애니메이션의 최종 상태를 유지하도록 브라우저에 지시합니다.

다음은 전달 값이 추가된 업데이트된 CSS 코드입니다.

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

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

animation-fill을 사용하여 모드: 앞으로 이동하면 애니메이션이 완료된 후에도 요소는 변형된 상태로 유지됩니다. 또한 옵션인 CSS 전환 및 애니메이션 종료 키프레임을 사용하여 애니메이션이 완료된 후 요소를 페이드 아웃하거나 제거할 수 있습니다.

위 내용은 CSS3 애니메이션을 마지막 프레임에 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!