Nikita Vasilyev

CSS transition from/to auto values

None of the browsers handle CSS transition from/to auto values correctly.

CSS transitions

I hope one day transitions to/from auto values will work out of the box in all major browsers. Meanwhile, read on.

Bug reports for WebKit and Firefox.

From auto = getComputedStyle(element).width = 'width .5s ease-in-out'
element.offsetWidth // force repaint = '200px'

To auto

var prevWidth = = 'auto'
var endWidth = getComputedStyle(element).width = prevWidth
element.offsetWidth // force repaint = 'width .5s ease-in-out' = endWidth
element.addEventListener('transitionend', function transitionEnd(event) {
	if (event.propertyName == 'width') { = '' = 'auto'
		element.removeEventListener('transitionend', transitionEnd, false)
}, false)

That’s a lot of code for a simple transition and haven’t even covered vendor prefixes to make it work in Firefox, WebKit, IE and Opera. To automate this I use jquery.transit.


jquery.transit is a jQuery plugin that provides neat JS API for creating animations using CSS transitions.

I forked jquery.transit to make it work with transitions from/to auto values.

element.transition({width: 'auto'}, 500, 'in-out')
element.transition({width: '200px'}, 500, 'in-out')

Pure CSS max-height (max-width) workaround

The most popular answer to "CSS transition height: 0; to height: auto;" question on Stackoverflow is:

Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get.
#to-from-max-width {
	transition: max-width 1s ease-in-out;

In the example above I set max-width to 4000px. Who has such a wide screen, right?

Here goes the problem:

The width of the orange box in your browser is currently Xpx.
Transition from 160px to 4000px takes 1 second.
Transition from 160px to Xpx takes (X-160)/4000 second; animation is 4000/(X-160)× faster than expected.
Transition from Xpx to 160px is delayed for 1-((X-160)/4000) second; that’s the time to go from 4000px to Xpx which has no visible effect whatsoever.

Resize you browser window, see how values change. Narrower the window, more screwed up the animation.

Published by
Nikita Vasilyev
· Updated