animation

CSS 애니메이션의 성능 아는 만큼 좋아져요!

본 문서는 원작자의 동의를 얻어 원문의 의미를 해치지 않도록 번역하였으며, 이해를 돕기 위한 Chrome DevTools 활용 방법을 추가했습니다. CSS 애니메이션의 성능 비교 웹 페이지에서 애니메이션을 어떻게 구현하고 계신가요? JavaScript animation? CSS animation? 웅성웅성뭐야 뭐라는ㄱ.. 라이브러리를 활용해 JavaScript 애니메이션을 구현할 수 있지만, 현재의 native CSS도 다양한 애니메이션을 구현할 수 있습니다.그 중 성능 더보기…

글쓴이 이 선영, 전

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 더보기…

글쓴이 김 원준, 전