css3 height transition on an absolute positioned div to overflow auto fails [duplicate]

Answer 1

trying using this as your css:

.block {
position: absolute;
height: 250px;
width: 250px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
overflow:hidden;}
.abs {
position: absolute;
height: 40px;
width: 200px;
background-color: yellow;
overflow: hidden;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;}
.abs:hover {  height: 100%; }

try this

Answer 2

Because you set the height of the div.abs to 40px

height: 40px;

Changed it to auto

 height:auto;

The full style is

 .abs {
            position: absolute;
            height:auto;
            width: 200px;
            background-color: yellow;
            overflow: hidden;
        }

Answer 3

height:auto is not support as part of a transition in css3.

You should rather try min-height, max-height, or transform (using the scalex(aNumberBetweenZeroAndOne))

http://jsfiddle.net/LefQV/