CSS를 사용하여 요소를 애니메이션된 최종 상태로 어떻게 유지할 수 있습니까?

CSS를 사용하여 애니메이션 상태 유지

CSS3에서 애니메이션은 요소에 동적 움직임을 추가하지만 애니메이션이 완료되면 초기 상태로 돌아갈 때 일반적인 문제가 발생합니다. 이는 원하는 결과가 영구적인 변경인 시나리오에서는 문제가 될 수 있습니다.

다음 CSS 애니메이션을 고려하세요.

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(100px);
  }
}</code>

이 애니메이션은 요소를 100px 아래로 떨어뜨립니다. 그러나 애니메이션이 완료된 후 요소는 원래 위치로 되돌아갑니다.

해결책: -webkit-animation-fill-mode 사용

애니메이션의 최종 상태를 유지하기 위해 CSS는 다음을 제공합니다. -webkit-animation-fill-mode 속성. 이 속성은 애니메이션이 발생하기 전후에 요소에 발생하는 상황을 제어합니다. 앞으로 설정하면 애니메이션이 끝난 후에도 요소가 종료 상태로 유지됩니다.

<code class="css">-webkit-animation-fill-mode: forwards;</code>

이 접근 방식을 사용하면 애니메이션이 끝난 후에도 애니메이션 요소가 수정된 위치를 유지할 수 있습니다. 요소의 모양을 원활하고 지속적으로 변경할 수 있어 순환 프로세스를 넘어 복잡한 애니메이션의 가치가 더욱 높아집니다.

위 내용은 CSS를 사용하여 요소를 애니메이션된 최종 상태로 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!