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

CSS 애니메이션 재시작

엘리먼트.effect {
	animation: animation 1s linear
}

이렇게 어떤 요소에 클래스로 만든 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때,

그 특정 애니메이션 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다.

하지만 아래와 같이 단순히 class를 제거하고 다시 추가해도 애니메이션이 재시작 되지 않습니다.

const target = 엘리먼트;

target.classList.remove("effect"),
target.classList.add("effect")

클래스를 붙이고 지우는 일은 사실 페이지의 많은 부분에 영향을 줄 가능성이 큽니다. 이런 변화를 바로 렌더링 하기에는 비용이 너무 크기 때문에, 브라우저는 바로 적용을 하지 않습니다.

다음 순서대로 렌더링이 되게 되기 때문입니다.

1. 클래스가 존재하면 지운다
2. 브라우저는 변화를 감지하지만 바로 적용하지 않고 일단 넘어간다.
3. 클래스 다시 추가한다.
4. 모든 로직이 종료되고 보니 아무런 변화가 없다. 브라우저는 변화가 없으므로 렌더링을 하지 않는다.

해결방법은, 클래스를 지운 후에 void element.offsetWidth;를 넣어주면 됩니다.

const target = 엘리먼트;

target.classList.remove("effect"),
void target.offsetWidth; 
target.classList.add("effect")

저 코드는 큰 뜻은 없습니다. 그저, 브라우저에 dom에 대한 정보(width)를 요청하면서 강제로 브라우저에게 일을 시키게 할 뿐이다. 브라우저는 시키니까 일단 계산을 진행하게 되고, 클래스를 지웠을 때의 로직 또한 바로 적용되게 되는 단순한 원리 입니다.

---

# 참고자료

https://marshall-ku.tistory.com/310