CSS Animate from/to “auto”

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

I have no doubt CSS will allow this one day, but right now, you can’t animate the width or height of an element from a fixed value to auto. This is particularly useful when the desire is to animate from hidden to visible like jQuery’s slideDown(). Nikita Vasilyev shows how you can do it with a touch of JS, but still using CSS for the actual animation/transition.

The more difficult one is to auto: 1) measure width 2) set auto 3) measure again 4) set back to previous 5) force repaint 6) apply transition 7) change width to measured auto value 8) set to auto for real. #wipesbrow

And yeah there is the max-height/width technique, but I’m not a fan. It messes with the transition timings and requires magic numbers.

Direct Link →