0

I am trying to animate the expansion of a div with flexible height. The animation is going from height: 0px to the target height. However, I do not no the target height. Therefore I have just assumed a height which is near the real height. This gives a very bad looking effect, since I am always overestimating or underestimating the height.

.expandable {
  background-color: red;
  width: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation-name: expand;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
@keyframes expand {
  from {
    height: 0px
  }
  to {
    height: 100px
  }
}
<div class="expandable">
  text
  <br />text
  <br/>text
  <br />text
  <br/>text
  <br />text
  <br/>text
</div>

See my fiddle: https://jsfiddle.net/gh3y1sbf/

what I would like to see is that the animation is smooth to the actual target height of the div.

Any ideas how this is possible? preferably without using javascript. Also, I am not using JQuery.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Christian
  • 4,345
  • 5
  • 42
  • 71

1 Answers1

2

See this :

How can I transition height: 0; to height: auto; using CSS?

Animate max-height rather than height !

Community
  • 1
  • 1
nncho
  • 165
  • 7
  • Be cautious thought. Using max-height can cause the a strange delay when you have a small menu with a large max-height value – Jackson Feb 10 '17 at 08:20
  • And in order to animate "height", javascript is required, right ? – nncho Feb 10 '17 at 08:28
  • 1
    hmm, I got this working, however i would have to set the max-height to something higher than the actual height. so preferably to something really high. But I think this should be working fine. Thank you! – Christian Feb 10 '17 at 08:29
  • 1
    Yes. CSS3 still cannot achieve animation to *some auto height* - without strange delays and stuff. – Roko C. Buljan Feb 10 '17 at 08:29