CSS animation won't work with 'overflow: hidden;'

Question

I would appreciate if someone could point me into the right direction by telling me what I'm doing wrong. Please look at this example. As you can see I'm trying to move 'div 2' into 'div 1' when the button is clicked. It actually works fine, the second div appears in the first div as expected, but for some reason the click doesn't trigger the CSS animation which should give the second div a slide effect.

I've narrowed it down to that it's got something to do with the 'overflow: hidden' attribute, because the animation will actually work when that's removed from 'div 1', but as you most probably figured out I want the second div to only be visible when it's positioned in the first div.

Why doesn't the animation work?

I'm using Chrome, OSX.

Thanks in advance!

/Christofer

Answer 1

He can help you, if you are in trouble:

http://jsfiddle.net/GLdQs/8/

.container {
    /* overflow: hidden; */
    clip: rect(auto, auto, auto, auto);
}

Unfortunately it shows the horizontal scroll bar.