AAtomic CSS

will-change

브라우저에 곧 변경될 속성을 미리 알려 최적화를 준비하게 합니다. 남용하면 오히려 성능이 저하되므로 필요한 경우에만 사용하고, wca로 리셋합니다.

클래스 목록

클래스CSS설명
wcawill-change: auto기본값. 브라우저가 자동으로 최적화를 판단

사용 예시

will-change는 브라우저가 별도의 레이어를 생성하여 GPU 가속을 준비하게 합니다. 애니메이션이 끝나면 반드시 리셋하세요.

<!-- 호버 시 transform 최적화 (부모에 적용) -->
<div class="hover-wct">
  <div class="tall200msease hover-ts1-1">
    호버 시 확대되는 카드
  </div>
</div>

<!-- 애니메이션 후 리셋 -->
<div class="wca">
  will-change가 리셋된 요소
</div>

팁 & 주의사항

남용 금지 -- 성능 저하 원인

will-change를 모든 요소에 적용하면 브라우저가 불필요한 레이어를 대량 생성하여 메모리 소비가 증가하고 오히려 성능이 나빠집니다.

애니메이션 직전에 추가, 이후에 제거

JavaScript로 애니메이션 시작 직전에 will-change를 추가하고, 완료 후 wca로 리셋하는 것이 이상적입니다.

최후의 수단으로 사용

대부분의 CSS 트랜지션과 애니메이션은 브라우저가 자동으로 최적화합니다. will-change는 성능 문제가 확인된 경우에만 적용하세요.

transitiontransformanimation