CSS 애니메이션 최적화

 

하드웨어 가속 활용

애니메이션 대상에 Transform 속성, Opacity 등을 명시적으로 사용하여 GPU 가속을 활용한다.

 

최적화된 이미지 사용

PNG, JPG 등 지원되는 형식과 적합한 크기 및 해상도의 이미지를 사용한다.

 

과한 애니메이션 조절

지나치게 많은 애니메이션을 동시에 실행하지 않도록 필요한 애니메이션을 선택한다.

 

will-change 속성 활용

브라우저에게 요소가 변경할 속성에 대해 미리 알려주어 성능을 향상시킨다.

.box {
	will-change : transform;
}

 

자바스크립트 requestAnimationFrame 활용

브라우저의 리페인트 주기에 맞춰 애니메이션을 업테이트하여 보다 부드럽게 표현한다.

function animate() {
    requestAnimationFrame(animate);
}
animate();

 

애니메이션 속도 조절

transition-timing-function으로 속도를 조절한다.

.animated-element {
    transition-timing-function: ease-in;
}
.animated-element {
    transition-timing-function: ease-out;
}
.animated-element {
    transition-timing-function: ease-in-out;
}