transition: all은 모든 CSS 속성의 변화를 애니메이션화하여 브라우저가 매 프레임마다 모든 것을 재계산하게 만들어 성능 저하(JANK)를 유발할 수 있음 🐌- 특정 CSS 속성(예:
transform)만 명시적으로 전환하도록 지정하면 불필요한 재계산을 줄여 부드러운 애니메이션을 구현할 수 있음 ✨ - React.dev 웹사이트의 섬네일 호버 효과에서
transition: all을transform으로 변경하여 JANK를 해결하고 부드러운 사용자 경험을 제공함 🖱️ - 개발 시
transition: all을 사용하는 것을 피하고, 필요한 속성만 명시하여 성능 문제를 예방하는 것이 중요함 ⚠️ - 오픈 소스 프로젝트에 기여하여 웹사이트의 성능을 개선하고 사용자 경험을 향상시킬 수 있음 💡
Recommanded Videos
