keyframes
-
[css] animation 재생을 다시 실행할 수 있도록 처리ETC 2024. 8. 11. 18:58
css animation을 특정 이벤트가 발생할 때마다 재생시키고 싶을 때 아래와 같이 작성하는 케이스가 있다. play 위 예제에서 버튼을 누르면 100px * 100px의 빨간색 박스가 아래로 이동했다가 원위치될것이다. 그런데 처음 버튼을 눌렀을 땐 정상동작하는데, 두번째부터는 정상동작하지 않는다. 이 경우 아래와 같이 소스를 수정하면 된다. play 이유는 html 태그의 구조나 다시 랜더링할 속성 변경이 없어서 브라우저의 리플로우(reflow) 및 리페인트(repaint)가 일어나지 않아서인데, offsetWidth과 같이 읽기만해도 리플로우(reflow)를 유발시키는 속성을 호출하여 이를 해결할 수 있다. What forces layout/reflow. ..