CSS3 애니메이션을 효율적으로 다시 시작하려면 어떻게 해야 합니까?

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 규칙을 정의합니다. 아래 그림과 같이 요소 및 키프레임 애니메이션:

#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; }
}

마지막으로 HTML 마크업을 포함합니다.

<div>

이 접근 방식은 "재설정" 버튼을 클릭할 때마다 애니메이션을 효과적으로 다시 시작합니다. 복잡한 시간 초과나 요소 조작이 필요하지 않습니다.

위 내용은 CSS3 애니메이션을 효율적으로 다시 시작하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!