Animation?
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 준다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
Tansform 사용시 3D를 사용하는 이유.
CSS 변형(2D transform)은 좌표공간을 변형함으로써 일반적인 무서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꾼다. 2D는 결국 X, Y축 좌표만을 조정할 수 있다.
하지만 3D는 평면에서 여러 개 CSS 속성을 조합하고 3D공간에서 회전, 확대, 이동, 비틀기를 포함해 원근감, 제 3자의 위치 등을 만들어 낼 수있다.
하여 2D보다 3D가 다양한 시각적 효과와 부드러운 애니메이션을 구현할 수 있게 해주기 때문에 3D를 사용한다.
애니메이션 최적화
🎈 웹페이지 성능이 저하되는 이유
브라우저에서 하나의 애니메이션 프레임을 처리한다는 것은 애니메이션 구현에 필요한 모든 계산과정과 계산을 통해 얻어진 픽셀 자리를 업데이트 하는 것까지 포함한다. 목표는 브라우저가 이 과정에서 할일을 최대로 줄여서 초당 60 프레임 정도의 부드러운 애니메이션을 만드는 것인데, CSS 애니메이션 구현 비용과 직접적으로 연관되어 있는 것은 reflow(재조정), repaint(재색칠)를 일으키지 않는 속성이기 때문에 reflow와 repaint를 최소화 시켜야 한다!
reflow는 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업이다. repaint는 reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시 reflow 과정이 생략 된 repaint 작업만 수행한다.
reflow가 발생하는 속성!
| width | height |
| padding | margin |
| display | border-width |
| border | top |
| position | font-size |
| float | text-align |
| overflow-y | font-weight |
| overflow | left |
| font-family | line-height |
| vertical-align | line-height |
| vertical-align | right |
| clear | white-space |
| bottom | min-height |
repaint가 발생하는 속성!
| color | border-style |
| visibility | background |
| text-decoration | background-image |
| background-position | background-repeat |
| outline-color | outline |
| outline-style | border-radius |
| outline-width | box-shadow |
| background-size |
reflow, repaint 최소화 하는 방법
-
개별 스타일을 바꾸는거보다 클래스 이름을 변경한다.
-
DOM 변경사항을 일괄처리한다.
- documentFragment를 사용하여 DOM 사용 최소화하기
-
영향받는 엘리먼트 제한하기( position fixed, absolute를 활용)
-
table 레이아웃 피하기
