How do I make an animation where a div goes from height: 0px; to [its regular height]?
one of my divs has a height that depends on the content inside it, and i want to make an animation for it to start out with a height: 0px; and then expand to have its regular height. How could this be done using @keyframes?
14 Replies
Obviously this is a start:
i think you want
autoKevin Powell
YouTube
This new CSS property just solved animating to height auto
✉️ Sign up for my newsletter for regular CSS tips & tricks: https://kevinpowell.co/newsletter
🔗 Links
✅ More on interpolate-size: https://developer.chrome.com/docs/css-ui/animate-to-height-auto
✅ The code from this video: https://codepen.io/kevinpowell/pen/XWvpjLr
✅ Browser support: https://caniuse.com/mdn-css_properties_interpolate-size
⌚ Tim...
i tried doing that, and that does achieve the desired visual effect, but it still has it so the div takes up the auto height compared to the rest of the content around it
don't know if i explained that very well
you can limit the height, you don't have to use
autowell i'd like to not have it limited as the height can depend on the content inside
unless i misunderstood
i think i get you
you want something like
max-content?tried, same problem as auto
visually it does the job, but the problem is that it doesn't push the stuff around it, which is part of the intended effect
like i want it to not have any size at all, then it appears in the middle and pushes all the things above it upwards as it increases the height
you might want to use the
<details> tag insteadyou want something like this behavior?
You could also use a grid row animation to go from 0fr to 1fr
might've figured it out. used max-height instead of height, and made it go from 0 to a size much larger than my div is ever gonna get, as recommended by someone on stack overflow
unsure if this is the most optimal approach
yes pretty much
The codepen Chris shared is what I use as well
Give it a shot, it's a really good solution.