시간 초과를 사용하지 않고 CSS3 애니메이션을 효율적으로 다시 시작하는 방법은 무엇입니까?

CSS3 애니메이션 다시 시작 재검토: 대체 접근 방식 공개

CSS3 애니메이션을 다시 시작하면 특히 요소의 크기를 복원하고 원래 상태로 다시 애니메이션을 적용하려고 할 때 문제가 발생할 수 있습니다. . 요소를 제거하고 다시 삽입하면 해결 방법이 제공되지만 가장 효율적인 솔루션은 아닐 수 있습니다.

보다 우아한 접근 방식은 리플로우를 활용하여 시간 초과에 의존하지 않고 변경 사항을 적용하는 것입니다. 다음 JavaScript 함수는 이 기술을 보여줍니다.

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

아래 CSS 및 HTML과 함께 이 함수를 사용하면 클릭 시 원활한 애니메이션 재설정이 가능합니다.

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div>

By 리플로우를 트리거하면 복잡한 지연이나 타이밍 없이 애니메이션이 재설정됩니다. 이 접근 방식은 CSS3 애니메이션을 다시 시작하기 위한 깔끔하고 효율적인 솔루션을 제공합니다.

위 내용은 시간 초과를 사용하지 않고 CSS3 애니메이션을 효율적으로 다시 시작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!