자바스크립트 애니메이션 재시작

🚀 CSS 애니메이션 재시작 하는 방법

CSS 애니메이션 재시작 엘리먼트.effect { animation: animation 1s linear } 이렇게 어떤 요소에 클래스로 만든 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때, 그 특정 애니메이션 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다. 하지만 아래와 같이 단순히 class를 제거하고 다시 추가해도 애니메이션이 재시작 되지 않습니다. const target = 엘리먼트; target.classList.remove("effect"), target.classList.add("effect") 클래스를 붙이고 지우는 일은 사실 페이지의 많은 부분에 영향을 줄 가능성이 큽니다. 이런 변화를 바로 렌더링 하기에는 비용이 너무 크기 때..

인파_

2021.10.19