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

초미세먼지 같은 팁입니다.

#YOURELEMENT.effect {

animation: animation 1s linear

}

이렇게 어떤 요소에 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때, 그 특정 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다.

단순히 class를 제거하고 추가하는 건 애니메이션을 재시작해주지 않고,

setTimeout을 이용해 딜레이를 살짝 주면 애니메이션이 재시작되긴 하지만, 딱히 바람직한 작동 방식은 아닐 겁니다.

function resetAnimation() {

const target = YOURELEMENT;

target.classList.remove("effect"),

void target.offsetWidth,

target.classList.add("effect")

}

간단하게 class를 빼고 더하는 스크립트 사이에 한 줄 추가해주면 끝입니다.