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

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

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) « WIT - NTS UIT Blog WIT - NTS UIT Blog
Last tagged : 18/04/27 17:30
Play videos continuously!
https://cdn.hoyatag.com/cache/2018/04/27/-7.jpg
0
#애니메이션 267
#animation 105
#css 6
#reflow 1
#성능개선 1
Loading...
모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 [...]
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) « WIT - NTS UIT Blog WIT - NTS UIT Blog
This album has no title.
Share
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 http://wit.nts-corp.com/2017/06/05/4571 CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) « WIT - NTS UIT Blog WIT - NTS UIT Blog 3
Leave a new tag on this content!
Mason Jung
Mason Jung
221
290
One person who dreams of my own media! :)
Share page of @Mason Jung
UnMark |Edit |Search
Mark |Dislike |Search
Mark |Del |Search
New