CSS3 collapse works with latency

I want to make an expandable block using css transitions.

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: