will-change / transformation 애니메이션 흔들림 방지

CSS Keyframe animation 으로 두근두근 하트를 만들려고 하는데 하트아이콘이 매우 부들부들 떨린다.

이때 will-change 명령어를 사용함으로써 브라우저에 어떤 항목이 애니메이션 적용이 되어 변할지 알려주게 된다.

will-change 명령어를 아래 예시와 같이 적용하면 다음과 같이 하트 애니메이션이 매끈하게 변하게 된다.

모든 애니메이션 적용이 이런것은 아니지만 종종 부자연스러운 움직임이 나타날때 will-change 를 사용하여

우리 브라우저가 매끈하게 작동하도록 도와줄 수 있다.

@keyframes heartBeat {
  0% {
    color: white;
    transform: none;
  }
  50% {
    color: tomato;
    transform: scale(1.5);
  }
  100% {
    columns: white;
    transform: none;
  }
}

.open-post__heart-count:hover i {
  will-change: transform;
  animation: heartBeat 1s linear infinite;
}