CSS3 애니메이션을 효과적으로 다시 시작하는 방법은 무엇입니까?

CSS3 애니메이션을 효과적으로 복원

CSS3 애니메이션을 다시 시작하는 것은 어려운 작업일 수 있습니다. 이 질문은 남은 시간을 표시하기 위해 scaleY(0) 변환을 사용하여 막대에 애니메이션을 적용하고 애니메이션을 scaleY(0)으로 재개하기 전에 scaleY(1)로 재설정해야 하는 상황을 조사합니다.

처음에는 scaleY(1)을 설정하여 애니메이션을 재설정하려고 시도했지만 효과가 없는 것으로 판명되었지만 이 질문은 애니메이션 요소의 복제본을 제거하고 다시 삽입하여 애니메이션을 다시 시작하는 흥미로운 솔루션을 제시합니다. 그러나 이 방법은 가장 효율적이거나 간단한 접근 방식이 아닐 수 있습니다.

요소 제거 및 재삽입에 의존하는 대신 리플로우 기술을 활용하는 것이 보다 실용적인 솔루션입니다. 이 기술에는 애니메이션 스타일을 일시적으로 제거하고 리플로우를 트리거하여 변경 사항을 적용한 다음 애니메이션 스타일을 재설정하는 작업이 포함됩니다. 다음 JavaScript 함수를 코드에 통합한 다음

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

이벤트(예: 버튼 클릭)에서 이 함수를 트리거하면 애니메이션을 효과적으로 재설정할 수 있습니다. 이 접근 방식은 CSS3 애니메이션을 다시 시작하는 간단하고 효율적인 방법을 제공합니다.

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