UI나 UX가 괜찮아보이는 페이지를 보고 따라 만들어보는 중에 transform을 사용해서 hover로 변경될 때 애니메이션을 적용했다.
근데 애니메이션이 약간 버벅인다고 해야되나 부드럽지 못하게 보였다. 퀄리티가 정말 떨어져보이고 별로 안 예뻐서 찾아보던 중에
will-change라는 css속성을 찾았다.
will-change: transform;
이 한 줄 추가되니깐 애니메이션이 부드러워지는 걸 봤다.
브라우저에게 엘리먼트가 어떤 변경을 할 것인지 미리 알려주는 속성이라고 한다.
참고글을 보니깐 transform으로 처리되는 부분과 엘리먼트를 따로 관리하고 다시 합쳐서 출력하는 중에 지연이 생겨서 처음에 버벅이는 현상처럼 보였던 것 같다.
transform은 GPU가속이 자동으로 활성화 되지 않아서 렌더링이 좀 느리다고 한다.
그리고 will-change는 사이드이펙트나 성능저하와 같은 문제를 일으킬 수 있기 때문에 남용하면 안되는 것 같다.
참고