[css/javascript]@keyframes 애니메이션 연속으로 실행하기

[css/javascript] 애니메이션 연속으로 실행하기

@Keyframes에서 css에 연결된 애니메이션 실행 시  클래스를 remove / add 를 통해 애니메이션을 제어하면

한번 실행 후 더 실행이되지 않는다.

그럴때 다음과 같이 하면 문제가 해결 된다

 

.test {
    animation: fadein 2s;
}

@keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

 

 

#offsetWidth를 통하여 해결가능하다

  const body = document.getElementById("body");
  body.classList.remove("test");
  body.offsetWidth;
  body.classList.add("test");

#Keyframes #js #css #class