[CSS] 애니메이션이 떨릴 때 (will-changed)

 

CSS 애니메이션이 떨릴 때

CSS에서 애니메이션을 적용시켰을 때 적용시킨 개체가 떨리는 경우가 가끔 있습니다.

주로 조그마한 개체에 애니메이션을 주었을 때 떨림 현상이 발생하는데, 

이때 will-change에 애니메이션에서 변경하는 속성을 주어 실제 요소가 변화되기 전에 브라우저가 애니메이션을 최적화할 수 있게 해 주면 이런 떨림 현상을 방지할 수 있습니다.

 

Ex)

@keyframes heartBeat {
  0% { transform: none; }
  50% { transform: scale(1.2); }
  100% { transform: none; }
}

h1 {
  animation: heartBeat 0.5s ease-in-out infinite;
  will-change: transform;
}

 

실험

HTML로 하트 2개를 만들고, 두 개의 하트에 동일한 애니메이션을 줬습니다.

하지만 두번째 하트는 will-change 속성을 통해 미리 브라우저에게 알려준 후 애니메이션을 수행시켰습니다.

 

See the Pen Untitled by Jaewoo Ahn (@devjaewoo) on CodePen.

자세히 보면 첫 번째 하트는 약간씩 떨리지만, 두 번째 하트는 안정적으로 애니메이션이 수행되는 것을 볼 수 있습니다.

 

결론

애니메이션 떨림 현상이 발생할 때 will-change 속성을 주면 해결됩니다.

하지만, MDN 문서에 의하면 will-change 옵션을 주는 것 자체가 브라우저에게 큰 부담을 주어 되도록 사용하지 않는 것을 권장하고 있습니다.

 

따라서 꼭 필요할 때만 적당히 사용하는 것이 좋을 것 같습니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/will-change