CSS3 collapse works with latency

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, yet when I want to collapse it, it occurs with some latency.
This is noticed in lastest versions Chrome, Firefox, Opera & IE.
Why does it happen & May I avoid this without using javascript animations?

P.S. If use height animation instead of max-height, collapse works well, yet I need collapse & expand block with unknown expanded height.

It looks that it happens because the collapsing animation starts to alter the max-height from the very large value & it takes to it some time to cross the actual height of the element, & the visible alter of the height starts only after that moment. The only workaround I see is to use separate animations for expansion & collapsing — a bit longer one with easing-in for the first & a bit shorter one that starts very sharply & 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