Good question, it’s obvious that it won’t fade out (because it will be instantly hidden) but I’m not sure why it wouldn’t work the other way around. The auto height value isn’t animatable either so that won’t have an effect.
Edit – and I don’t think it would be noticeable unless you use overflow: hidden .
Must have to do with the fact that display: none removes the element from the page flow, so it’s “not really” there when the animation starts…
Works fine with the visibility property.
Once again I’ll edit – I had something similar last week. The CSS will only “realise” it is not display: none anymore until the next calculation cycle of the machine. In my example, I set a zero delay timeout to execute the next block of code.