CSS3 collapse works with latency - css

Question

I want to make an expandable block using css transitions.
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
-webkit-transition: max-height 400ms ease-in-out;
-moz-transition: max-height 400ms ease-in-out;
-ms-transition: max-height 400ms ease-in-out;
-o-transition: max-height 400ms ease-in-out;
transition: max-height 400ms ease-in-out;
}
.box.open {
max-height: 999px;
}
Here's working example: http://jsfiddle.net/qswgK/.
When I expand the block, it slides down well, but when I want to collapse it, it occurs with some latency.
This is noticed in lastest versions Chrome, Firefox, Opera and IE.
Why does it happen and May I avoid this without using javascript animations?
P.S. If use height animation instead of max-height, collapse works well, but I need collapse and expand block with unknown expanded height.

Answer 1

It looks that it happens because the collapsing animation starts to change the max-height from the very large value and it takes to it some time to cross the actual height of the element, and the visible change of the height starts only after that moment. The only workaround I see is to use separate animations for expansion and collapsing — a bit longer one with easing-in for the first and a bit shorter one that starts very sharply and eases out just before ending for the latter, like the following:
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */
}
.box.open {
max-height: 999px;
transition: max-height 400ms ease-in; /* for expansion */
}
fiddle