Geek Answers Handbook

CSS animation will not work with 'overflow: hidden;'

I would appreciate it if someone could point me in the right direction by telling me what I'm doing wrong. Take a look at an example . As you can see, I am trying to move "div 2" to "div 1" when the button is clicked. It really works fine, the second div appears in the first div, as expected, but for some reason, the click does not cause a CSS animation that should give the second div a slide effect.

I narrowed it to the point that it has something to do with the overflow: hidden attribute, because the animation will work when it is removed from "div 1", but as you probably found out, I want second div to be visible only when it is positioned in the first div.

Why animation doesn’t work?

I am using Chrome, OSX.

Thanks in advance!

/Christopher

+4
source share
2 answers

Another trick can move overflow: hidden into an animated element:

http://jsfiddle.net/GLdQs/9/

 #id1 { width: 0px; overflow: hidden; } #id1 > p { width: 500px; /* you probably want a fixed width for the content */ } @-webkit-keyframes slide { 0% { left: 500px; top: 0px; width: 0px; } 100% { left: 0px; top: 0px; width: 500px; } }​
+2
source

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 a horizontal scrollbar.

+9
source

More articles:


All Articles