완료 후에도 CSS3 애니메이션을 유지하는 방법은 무엇입니까?

CSS3 애니메이션의 최종 결과 보존

CSS 애니메이션에서 "Hello World" 텍스트가 예상대로 드롭다운되지만 반환됩니다. 완료되면 원래 위치로 돌아갑니다. 애니메이션이 종료되고 원래 스타일이 다시 시작되므로 이러한 동작은 자연스러운 현상입니다. 그러나 최종 결과가 지속되도록 하는 것을 선호할 수도 있습니다.

이를 달성하려면 -webkit-animation-fill-mode 속성을 활용할 수 있습니다. WebKit에 도입되고 iOS 4 및 Safari 5에 구현된 이 속성을 사용하면 애니메이션이 지속되는지(끝 또는 시작) 또는 완료 후 원래 상태로 재설정되는지 선택할 수 있습니다.

-webkit- 설정 animation-fill-mode를 앞으로 진행하면 애니메이션의 최종 상태가 유지됩니다. 이를 통해 애니메이션이 완료된 후에도 변경된 속성을 유지할 수 있습니다. 업데이트된 CSS는 다음과 같습니다.

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

이를 통해 "Hello World" 텍스트는 100px 아래로 드롭다운되어 무기한 유지되며 추가적인 JavaScript 또는 CSS 전환 없이 애니메이션의 최종 결과를 유지합니다.

위 내용은 완료 후에도 CSS3 애니메이션을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!