animation 최적화 기법
CSS transform 속성
- 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
- transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
- 변형 가능한 요소만 transform할 수 있습니다.
- CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다.
/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;transform을 사용하는 방법은 위와 같습니다.
transform 의 2d 사용
- CSS 변형(2D transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다.
- 변형으로써 이동을 시키거나 크기, 회전, 비틀림을 제어하는 경우에 사용합니다
- 트랜스폼은 X축, Y축 좌표만을 조정할 수 있는 2D 입니다
변형 (transform) 함수의 분류
- 2차원의 2D 형태로 변형하고자 할 때
- 3차원의 3D 형태로 변형하고자 할 때
- transform 속성의 변형 함수들은 2차원의 2D형태로 변형하고자 할 때와 3차원의 3D형태로 변형하고자 할 때로 나뉘어 사용됩니다.
| 변형 형태 | 이동함수 | 회전함수 | 크기함수 | 기울기함수 |
| 2차원 변형 | translate(x,y) | rotate(deg) | scale(xdeg,ydeg) | skew(x,y) |
| translateX(x) | scaleX(x) | skewX(deg) | ||
| translateY(y) | scaleY(y) | skewY(deg) | ||
| 3차원 변형 | translate3d(x,y,z) | rotate3d(x,y,z,deg) | scale3d(x,y,z) | |
| translateX(x) | rotateX(deg) | scaleX(x) | ||
| translateY(y) | rotateY(deg) | scaleY(y) | ||
| translateZ(z) | rotateZ(deg) | scaleZ(z) |
3D 변형(transform)
3D 변형(transform)을 위해 제공되는 메소드(method)는 다음과 같습니다.
- rotate()
- translate()
- scale()
- matrix()
- perspective()
| transform | 요소에 2D 또는 3D 변형(transform)을 적용함. |
| transform-origin | 요소에 변형(transform)을 적용하는 변환 중심을 설정함. |
| transform-style | 요소에 변형을 적용할 때 그 변환이 자식(child) 요소들에게도 적용될지 안 될지를 설정함. |
| perspective | 3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정함. |
| perspective-origin | 3D 요소에 원근감을 표현할 때 사용할 기준 축을 설정함. |
| backface-visibility | 요소의 앞면만을 표현하고, 뒷면을 표현할지 안 할지를 설정함. |
그렇다면 웹 브라우저에서 오류 없이 작동될까?
언뜻 보이게는 애니메이션이 잘 적용된 것으로 보이지만 애니메이션으로 사용하면 안되는 CSS 속성이 추가되어 있습니다.
- 왼쪽으로 축소: margin(성능 문제)
- 아래쪽으로 천천히 확장: height(성능 문제)
- fade in / fade-out: opacity
- ‘X’ 버튼 회전: rotate
- ‘↑↓’ 버튼 아래쪽으로 이동: translateY
“브라우저에서 하나의 애니메이션 프레임을 처리한다는 것은
애니메이션 구현에 필요한 모든 계산 과정과 계산을 통해 얻어진
픽셀 자리를 업데이트 하는 것까지 포함합니다.
목표는 브라우저가 이 과정에서 할일을 최대로 줄여서
초당 60프레임 정도의 부드러운 애니메이션을 만드는 것입니다.
CSS 애니메이션 구현 비용과 직접적으로 연관되어 있는 것은
재조정(reflow)와 재색칠(repaint)를 일으키지 않는 속성들입니다.”
-> 즉, 부드러운 애니메이션을 적용하려면 reflow와 repaint를 최소화 시켜야 합니다.
reflow란?
생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를
다시 계산하여 렌더 트리를 재생성하는 작업입니다.
repaint란?
reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는
background-color, visibility, outline 등의 스타일 변경시에는 reflow 과정이 생략 된 repaint 작업만 수행합니다.
reflow를 피하거나 최소화하는 방법
1. 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 추가합니다.
클래스가 변화할 때 reflow가 일어나는 것은 피할 수 없지만 성능 문제를 최소화 할 수 있습니다.
아래의 코드는 자바스크립트를 이용하여 <div id=”change”>의 넓이를 50%로 줄이려고 하는 코드입니다.
코드에는 .addclass 를 추가하여 넓이를 줄이려 하고 있는데 DOM 트리에서 가장 말단에 있는 노드에 클래스를 추가하여 넓이를 줄일 때 가장 빠릅니다.
2. 애니메이션이 들어간 엘리먼트는 가급적 position: fixed 또는 position: absolute로 지정합니다.
위치 이동을 구현한 애니메이션(넓이나 높이값 변경 등)은 reflow가 짧은 시간 내 반복적으로 일어나게 됩니다. 그래서 사용하지 않는 것이 가장 바람직하나 반드시 사용해야 한다면 애니메이션이 들어간 요소에 position: absolute 혹은 position: fixed 속성을 적용합니다. 다른 요소에는 영향을 끼치지 않으므로 페이지 전체가 아닌 해당 요소만 reflow가 발생합니다.
3. JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리합니다.
4. 인라인 스타일을 최대한 배제합니다.
위의 내용과 중복되며, reflow 비용을 줄이는 것 이외에 코드 가독성도 높일 수 있습니다.
5. 테이블 레이아웃을 피하는 것이 좋습니다.
테이블 레이아웃을 사용하게 되면 테이블 값에 따라 넓이를 계산하므로 랜더링이 느려집니다. 그러므로 꼭 필요한 경우를 제외하고는 테이블 레이아웃을 사용하지 않는 것이 좋습니다. 만약 사용한다면 CSS 속성 table-layout:fixed를 사용하면 랜더링을 조금 더 빠르게 할 수 있습니다.
참고링크: https://developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
developer.mozilla.org
http://www.tcpschool.com/css/css3_transform_3Dtransform
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
CSS 스타일 문서에서 사용하는 변형 (transform)
CSS3 에서 사용하는 속성으로 HTML 요소의 위치, 모양, 크기 등을 변형시킬 수 있다.transform 속성의 변형 함수들은 2차원의 2D 형태로 변형하고자 할 때와 3차원의 3D 형태로 변형하고자 할 때로 나뉘
velog.io