xiry.

Development · Tip

Animating height: auto in CSS

Modern CSS technique for smooth height transitions without fixed pixel heights

From the Xiry library · Updated 11 October 2026

Demonstrates how to achieve smooth expand and collapse animations on elements with dynamic or intrinsic content size. It solves a long-standing CSS limitation for components like accordions and collapsible sidebars without requiring JavaScript height calculations. Modern implementations typically rely on CSS Grid row interpolation or the newer calc-size() and interpolate-size properties.

How it works

Tip from @pqoqubbw: you can animate height:auto in CSS. The demo animates a documentation sidebar: nav sections (Playground, Models, Documentation, Settings) expand to reveal nested items (History, Settings; Genesis; Introduction, Get Started, Tutorials, Changelog; General, Team, Billing, Limits) and collapse back, all with fluid motion and no jumpiness; the sidebar's overall height also animates as content is added or removed. No code is shown in the video; typical implementations use grid-template-rows 0fr -> 1fr with overflow hidden, or the newer calc-size()/interpolate-size approach.

What it's for

  • Animate collapsible accordion menus without hardcoding fixed pixel heights
  • Create smooth auto-sizing sidebars and dropdown menus
  • Transition container heights dynamically when content is added or removed

Key points

  • Eliminates the need for JavaScript-based height measurement hacks
  • Achievable via CSS Grid grid-template-rows interpolation (0fr to 1fr)
  • Compatible with modern CSS interpolate-size and calc-size() specifications
  • Prevents visual stuttering and abrupt content jumping during expansion

Pricing

Free

Details

Type
Tip
Category
Development
Topic
CSS Techniques
Open source
No
Platforms
Web
For
Front-end developers and UI engineers
Alternative to
JavaScript height measurement animations, max-height CSS animation hacks
Tags
css, animation, web dev, frontend, ui

Why it was saved

  • @pqoqubbw, 20 April 2025: Animating height:auto is a long-standing pain point; this shows a fluid production-quality approach that works for accordions and self-sizing containers.

Related

  • Anime.js

    Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • CSS Card Parallax with Pointermove and Custom Properties

    CSS recipe for interactive 3D card tilt and 2D layer parallax

  • React Bits Micro

    Free, animated micro-interaction components for React interfaces

  • Transitions.dev

    Curated library of copy-paste web app micro-interactions and transitions

  • GSAP

    High-performance JavaScript animation library for web elements, SVG, and canvas.

Updated