참고 글 : https://velog.io/@kjewt/HTMLCSS-animation-최적화-기법, https://velog.io/@tmdcksqkd123/애니메이션animation-최적화-기법, https://velog.io/@xnelb013/제로베이스-animation-최적화-기법에-대해
⭐ CSS의 animation
A, B, C, D 등의 여러 상태로 바뀌면서 여러개의 스타일을 자동으로 재생할 수 있게 하는 요소
즉, 요소의 움직임, 변화를 transition속성에 비해 부드럽게 구현할 수 있는 속성.
transition의 경우 원리는 A에서 B로 변하는 것을 어떻게 변하게 할지가 초점이기 때문에 여러 상태를 지정할 수는 없다. animation의 경우 여러 상태를 지정해 스톱모션이나 플립북같은 원리로 다양한 움직임을 만드는 원리이다.
어떤 요소를 바꿀지에 대한 property속성이 따로 없고 keyframes를 이용해 animation 박스를 따로 만들어 name을 붙여 사용한다.
⭐ @keyframes
애니메이션 중간중간 특정 지점을 설정하는 속성
⭐ animation-name
@keyframes의 이름, 어떤 프레임들을 이용해 애니메이션 효과를 줄 지 선택
- 사용가능한 문자
: 알파벳, 숫자, _(언더스코어), -(대쉬)- 사용불가능한 키워드
: none, unset, initial, inherit
⭐ HTML/CSS에서 animation 사용
📌 장점
- 웹 페이지를 생동감 있게 구현할 수 있음
- 간단한 움직임과 사용자와의 상호작용을 간단하게 구현가능
📌 단점
- 너무 많이 사용하거나 복잡한 애니메이션을 적용하면 웹 페이지의 성능이 떨어짐
- 애니메이션 효과가 자연스럽지 못하고 끊기는 듯한 현상이 발생할 수 있음
⭐ animation 최적화?
CSS 애니메이션을 구현할 때의 단점인 성능이 떨어진다거나, 애니메이션 효과가 끊기는 듯한 현상이 발생하는 것 등을 막고 부드러운 애니메이션을 적용하기 위한 방법
⭐ animation 최적화 방법
📌 reflow / repaint 최소화
리플로우(reflow)
: 레이아웃 계산을 다시 하는 것
노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등
레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행된다.
리페인트(repaint)
: 재결합된 렌더 트리를 기반으로 다시 페인트하는 것을 의미한다.
리플로우와 리페인트가 발생하면 웹 페이지 성능의 저하가 생길 확률이 높아진다.
그렇기 때문에 리플로우와 리페인트의 발생시키는 것을 줄여 animation을 최적화 할 수 있다.
리플로우가 발생하는 속성
| 리플로우 | (reflow) | ||
|---|---|---|---|
| width | height | padding | margin |
| display | border-width | border | top |
| position | font-size | float | text-align |
| overflow-y | overflow | font-weight | left |
| font-family | 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 |
위의 표에 있는 속성들의 변경을 최대한 줄인다.
📌 transform 사용하기
transform은 레이아웃에 영향을 주지 않으면서 독자적으로 요소의 위치 및 확대, 축소, 회전이 가능한 css 요소이다. 그렇기 때문에 transform을 사용하면 브라우저에서 GPU(그래픽 처리 장치)를 사용하며 이것은 CPU에 부담을 덜어줄 수 있기 때문에 성능을 저하하지 않게 된다.
+)
transform 사용 시에 3d를 사용하는 이유
3D transform을 이용하면 x,y,z 축으로 3차원상에서 이동할 수 있다. 3차원 공간에서 요소의 위치나 크기 및 회전을 조정할 수 있게 되는 것. 이를 잘 사용하면 요소를 3d 공간에서 자유롭게 이동시키고 회전시킬 수 있어 2d transform보다 더 다양한 효과를 줄 수 있다.
📌 인라인 스타일을 사용하지 않기
인라인 스타일은 HTML이 파싱될 때, 레이아웃에 영향을 미쳐 추가 리플로우를 발생시킨다.
📌 animation이 부여된 요소는 position : fixed, absolute 사용하기
애니메이션 효과는 많은 reflow 비용을 발생시킨다. position 속성을 fixed 또는 absolute의 값으로 주어, 지정된 요소를 전체 노드에서 분리시켜 해당 노드에서만 reflow가 발생하도록 제한시킬 수 있다.
애니메이션 효과를 줘야 하는 요소에 position 속성이 적용이 되지 않았다면 애니메이션 시작 시 position 속성 값을 fixed 또는 absolute로 변경하였다가 애니메이션 종료 후 다시 원복시켜서 렌더링을 최적화 할 수 있다.
