📌 transform 사용할 때 3d를 사용하는 이유
3D 변환을 사용하는 이유는 하드웨어 가속을 통해 더 빠르게 애니메이션을 처리할 수 있기 때문이다. 3D 변환은 GPU 가속을 이용하여 렌더링되며, 이는 CPU가 처리하는 것보다 훨씬 빠르다. 따라서 3D 변환을 사용하면 부드러운 애니메이션을 구현할 수 있으며, 성능도 향상된다.
📌 animation 사용할 때 css로 최적화하는 방법
CSS 기반 최적화는 애니메이션을 구현할 때 CSS 속성을 최적화하여 성능을 향상시키는 기술이다.
1. GPU 가속을 활용하는 CSS 속성 사용
GPU 가속은 3D 변환에서 사용되지만, 일부 CSS 속성도 GPU 가속을 지원한다. 이러한 속성은 변환, 투명도, 그림자 등이 있다. GPU 가속은 애니메이션 처리에 필요한 작업을 GPU에 할당하여 성능을 향상시키는 방법이다. 이를 위해서는, 요소에 transform 속성을 적용하고, 애니메이션을 처리할 때 translateZ() 값을 사용해야한다.
.element {
transform: translateZ(0);
}2. will-change 사용
will-change 속성은 브라우저에게 요소가 변경될 것임을 알리고, 변경될 요소를 브라우저가 최적화할 수 있도록 한다. 이를 통해 애니메이션 처리에 필요한 리소스를 미리 할당하여 성능을 향상시킬 수 있다.
.element {
will-change: transform;
}3. translate3d() 사용
transform 속성은 다양한 2D 및 3D 변환을 지원하지만, 이러한 다양성은 불필요한 계산을 초래할 수 있다. 따라서 필요한 단일 변환만 사용하는 것이 좋다. translate3d()는 3D 변환을 지원하며, 하드웨어 가속을 사용하여 애니메이션을 부드럽게 처리한다. translate3d()를 사용하면, X, Y 및 Z 축에 대해 이동할 수 있다.
.element {
transform: translate3d(0, 0, 0);
}4. requestAnimationFrame 사용
requestAnimationFrame은 브라우저에서 제공하는 API 중 하나로, 애니메이션을 부드럽게 처리할 수 있도록 도와준다. 이 API는 브라우저가 다음 리페인트를 그릴 때마다 자동으로 호출되며, 브라우저의 최적화된 애니메이션 처리 시스템을 활용하여 성능을 최적화한다. requestAnimationFrame을 사용하면, 브라우저의 다른 탭에서 작동하는 애니메이션이나 스크롤 이벤트에 대한 처리를 고려할 필요 없이, 현재 탭의 애니메이션 처리에만 집중할 수 있다. 이를 통해, 더욱 부드러운 애니메이션을 구현할 수 있다.
function animate() {
requestAnimationFrame(animate);
// 애니메이션 처리 로직
}
animate(); // 애니메이션 시작5. 애니메이션 속성 최소화
애니메이션을 처리할 때 필요한 속성을 최소화하는 것이 중요하다. 이를 위해서는, 애니메이션 처리에 필요한 속성만 사용해야 하며, 다른 속성은 최소화해야 한다.
.element {
transition: transform 0.3s ease-in-out;
}