WebKit의 CSS3 애니메이션이 최종 상태를 유지하도록 만드는 방법은 무엇입니까?

최종 상태를 유지하는 Webkit CSS 애니메이션

CSS3 애니메이션에서는 애니메이션 요소가 이후에 원래 상태로 돌아가는 문제가 발생할 수 있습니다. 애니메이션이 완료됩니다. 이는 애니메이션이 요소에 적용되는 임시 변형이며 일단 완료되면 요소의 원래 스타일이 이어지기 때문일 수 있습니다.

그러나 끝 위치를 만들 수 있는 해결 방법이 있습니다." 어려운." -webkit-animation-fill-mode 속성을 ​​사용하면 애니메이션의 최종 상태를 유지할 수 있습니다.

예를 들어 다음 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>

애니메이션이 끝나면 요소가 원래 위치로 되돌아갑니다. 이를 방지하려면 CSS에 다음 줄을 추가하면 됩니다.

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

이를 추가하면 애니메이션이 완료된 후에도 요소가 변환된 위치(100px)를 유지합니다. 이 속성은 WebKit에서 도입되었으며 iOS 4 및 Safari 5 이상에서 지원됩니다.

위 내용은 WebKit의 CSS3 애니메이션이 최종 상태를 유지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!