Slide up, slide down animation from 0 to auto height

Asked Sep 18 '17 at 10:27

Active Sep 18 '17 at 10:27

Viewed 38 times

I would like to get slide down / slide up animation effect for div by pure css. I wrote something like that:

.some-class {
     overflow: hidden;
     max-height: 500px;
     transition: max-height 0.25s ease-out;
}

.some-class:focus {
     max-height: 0;
     transition: max-height 0.25s ease-in;
}

and everything is fine, but I want that max-height may be unknown. When I set max-height: auto; in some-class styles animation effect is missing. Is it possible to animate changing height of div, if I don't know its exact height?

asked Sep 18 '17 at 10:27

Jaroslaw K.

5,224
2
39
65

Attach a working fiddle. – Mohammed Wahed Khan Sep 18 '17 at 10:33
No, I don't think it's impossible in pure CSS. However you could set max-height to some really high value that the element will never reach, like 9999px... Pretty dirty hack, but it should work. – Fuross Sep 18 '17 at 10:37
No. You have to know what's the height it doesn't work with auto. Maybe calc but i have never tried. – user5014677 Sep 18 '17 at 10:42

Slide up, slide down animation from 0 to auto height

0 Answers0