Smooth Transitions to Height Auto with CSS interpolate-size

For more than a decade and a half of modern web development, animating elements smoothly between zero dimensions and intrinsic content sizes like height: auto stood as one of CSS's most frustrating limitations. Because traditional CSS transition engines only calculated intermediate frames between explicit numerical values—such as pixels, rems, or percentages—developers had to rely on brittle workarounds. These included animating max-height to an arbitrary oversized ceiling (which distorted transition durations and easing curves) or running synchronous JavaScript measurement scripts that read scrollHeight and triggered layout thrashing.

The CSS Values and Units Module Level 4 introduces the interpolate-size property and the calc-size() mathematical function, solving this limitation natively at the engine level. By declaring interpolate-size: allow-keywords on the root document or a local container, developers unlock smooth animations between length values and intrinsic keyword dimensions such as auto, min-content, max-content, and fit-content. Collapsible disclosure widgets, accordion panels, and dynamic cards can now expand and collapse fluidly with precise easing functions without relying on JavaScript height calculations or synthetic max-height boundaries.

Example #

<details class="accordion-panel">
  <summary class="panel-trigger">
    What is CSS interpolate-size?
  </summary>
  <div class="panel-content">
    <p>
      The interpolate-size property enables smooth transitions between
      numerical lengths (like 0px) and intrinsic sizing keywords (such as auto).
    </p>
  </div>
</details>

Implementation #

/* 1. Enable keyword sizing transitions across the document root */
:root {
  interpolate-size: allow-keywords;
}

/* 2. Style the accordion container */
.accordion-panel {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #ffffff;
  overflow: hidden;
  max-width: 540px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.panel-trigger {
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  background-color: #f8fafc;
  user-select: none;
  transition: background-color 0.2s ease;
}

.panel-trigger:hover {
  background-color: #f1f5f9;
}

/* 3. Animate panel content from 0 to auto directly */
.accordion-panel .panel-content {
  height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  opacity: 0;
  transition: 
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}

/* 4. Expanded state transitions directly to intrinsic content height */
.accordion-panel[open] .panel-content {
  height: auto;
  padding: 1rem 1.25rem;
  opacity: 1;
}

/* 5. Progressive enhancement fallback using calc-size for targeted elements */
@supports not (interpolate-size: allow-keywords) {
  @supports (height: calc-size(auto, size)) {
    .accordion-panel[open] .panel-content {
      height: calc-size(auto, size);
    }
  }
}

Main Point: The interpolate-size property unlocks native CSS transitions to height auto and intrinsic keywords, rendering max-height workarounds and JavaScript dimension queries obsolete.

Credits #

Photo by Scott Webb on Unsplash

← Home