css 애니메이션 버벅거림(jank)해결하기 1편
내가 한땀한땀 예쁘게 만든 애니메이션... 코드는 문제 없는데, 실제 화면에서는 왜 덜덜덜거릴까? See the Pen jank-animation-before by ylem76 (@ylem76) on CodePen. 후후... 임베드한 코드펜에서는 왜 멀쩡해보일까? ^^... css를 이용해 애니메이션을 구현하다보면 예상치 못하게 덜덜덜 거리는 걸 볼 수 있다. 이런 문제를 두고 쟁크(jank)라고 하고, 브라우저 렌더링 단계 중 리플로우(레이아웃)와 관계가 있기 때문에 리플로우라고 검색해도 관련 내용을 찾을 수 있다.
https://songsong.dev/entry/css-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%B2%84%EB%B2%85%EA%B1%B0%EB%A6%BCjank%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-1%ED%8E%B8
Seonglae Cho
![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://www.notion.so/image/https%3A%2F%2Fblack7375.tistory.com%2Ffavicon.ico?table=block&id=0fb207bf-224b-4ee5-b25b-5bbf2354ecfd&cache=v2)
![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252FFM5Z5%252FbtqWWsOdWiT%252FKHI0LMAvyNP2FC6IaoYy6k%252Fimg.png?table=block&id=0fb207bf-224b-4ee5-b25b-5bbf2354ecfd&cache=v2)
