will-change 속성에 대한 브라우저 호환성
속성
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
will-change 36 79 36 9.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 0.3s;
  }
  .box:hover {
    will-change: transform;
    transform: scale(1.2);
  }
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 0.3s;
}
.box.optimized {
    transform: scale(1.2);
}
<div class="box"></div>
 // 페이지 로드 후에 최적화 클래스 추가
 window.addEventListener('load', () => {
    const box = document.querySelector('.box');
    box.classList.add('optimized');
 });
// 예를 들어 클릭 시 애니메이션을 적용할 요소를 가져옵니다.
var el = document.getElementById('element');

// 요소에 마우스를 올렸을 때 will-change 속성을 설정합니다.
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	// 애니메이션의 keyframes 블록에서 변경될 수 있는 최적화가 가능한 속성들
	this.style.willChange = 'transform, opacity';
}

function removeHint() {
    // will-change 속성의 설정값을 초기값으로 지정하여 제거합니다.
	this.style.willChange = 'auto';
}