CSS interpolate-size: animate toward content height carefully

When to use it

A compact case synopsis expands when its controlling button changes an expanded state. The closed state has a fixed block size, while the open state takes the content's natural height. Set interpolate-size on the component wrapper so the opt-in does not unexpectedly affect unrelated disclosures across the page. The content must remain reachable when the closed clipping is intentional: use a real control with an accessible expanded state, and avoid clipping focused links. In older browsers the height may jump directly to auto, which keeps the content available. Test a single paragraph, a long localized paragraph, loading content that arrives mid-transition, zoom, and reduced motion. The rule is for presentation; it does not know whether data was authorized or loaded, and it cannot replace semantic disclosure markup or application state.

.case-synopsis { interpolate-size: allow-keywords; }
.case-synopsis__body { block-size: 4rem; overflow: clip; transition: block-size 220ms ease; }
.case-synopsis[aria-expanded="true"] .case-synopsis__body { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .case-synopsis__body { transition: none; } }

Cost and verification

Animating block size can cause layout work on each frame because later content moves as the panel grows. Measure on a page with a realistic number of cards; a one-card demo can hide the cost. The feature is an opt-in precisely because changing how intrinsic values animate can affect existing designs. Scope it narrowly and keep a snap-open fallback. Avoid a max-height approximation with an arbitrary huge value: the perceived timing changes with actual content height and overflow can be misleading. A natural-height target can change during image load, so size media explicitly or test that update. Motion reduction should keep the expanded state available immediately.

Common Mistakes

• Do not expect two intrinsic keywords to interpolate.
• Do not set the opt-in on the document root without auditing every size transition.
• Do not clip a focused control inside the collapsed body.

Connected lessons

• CSS Property Decisions
• CSS intrinsic sizing: let content set limits without forcing overflow
• CSS reduced motion: remove nonessential movement at the source
• HTML details and dialog: distinguish disclosure from a modal task