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

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 [...]<i class="fa fa-language transViewIcon clickable" title="Translation"></i>

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그
Last tagged 2024/02/11 14:35
Play musics without ads!
https://cdn.hoyatag.com/cache/2018/04/27/-7.jpg
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그
0
#성능개선 2
#animation 1
#css 1
#reflow 1
#애니메이션 1
Loading...
모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 [...]
This playlist has no title.
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그
Share with your friends!
Press emoticons to leave feelings.
#Like
#Like
0
#Funny
#Funny
0
#Sad
#Sad
0
#Angry
#Angry
0
#Cool
#Cool
0
#Amazing
#Amazing
0
#Scary
#Scary
0
#Want more
#Want more
0
30 https://wit.nts-corp.com/2017/06/05/4571 CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그 3
Mark LIKE on the tags!
164 성능개선
161 animation
162 css
1
163 reflow
165 애니메이션
Mason
Mason
223
293
One person who dreams of my own media! :)
 
Share page of @Mason
UnMark |Edit |Search
Mark |Dislike |Search
Mark |Del |Search
Open
Report
Translation