<div id="blurry" style="transform: translateZ(0);">자바스크립트가 애니메이션이 실행되면 조금 흐려집니다.</div>
<div id="crisp" style="transform: scale(1, 1) translateZ(0) ">흐려지지 않습니다.</div>

div{
  font-size: 20px;
  width: 200px;
  height: 15px;
}

#blurry{
   will-change: transform;
}
window.addEventListener('load', () => {
  requestAnimationFrame(() => {
  	requestAnimationFrame(() => {
	    blurry.style.transform = "scale(3, 3) translate3d(100px, 25px, 0) "
      crisp.style.transform = "scale(3, 3) translate3d(100px, 100px, 0) "
	  });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.