interpolate-size 속성은 CSS에서 고정 크기 값(20px, 100% 등)에서 고유 크기 키워드(auto, fit-content, max-content 등)로 부드러운 애니메이션과 트랜지션을 가능하게 해주는 속성이다.

기존 문제점

기존에는 height: 0에서 height: auto로 애니메이션할 수 없어 JavaScript로 가려지는 영역의 직접 높이를 계산해서 구현해야했다.

.element {
  height: 0;
  transition: height 0.3s;
}
 
.element.open {
  height: auto; /* ❌ 0에서 auto로 애니메이션 불가 */
}

해결책: interpolate-size

interpolate-size: allow-keywords를 설정하면 브라우저가 auto, fit-content 등의 고유 크기 키워드를 실제 계산된 값으로 보간할 수 있어 구현이 편리하다.

/* 전역 설정 */
* {
  interpolate-size: allow-keywords;
}
 
/* 이제 작동함 */
.element {
  height: 0;
  transition: height 0.3s;
}
 
.element.open {
  height: auto; /* ✅ 0에서 auto로 부드럽게 애니메이션 */
}

실제 예제

브라우저 지원

• Chrome/Edge: 129+
• Safari: 18+
• Firefox: 지원 예정

참고 문서

MDN: interpolate-size Chrome for Developers: Animate to height auto