A simple CSS-only method of height animation 0% to 100%.
<div class="quick-example">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti, sint distinctio deserunt vel unde consequatur sequi nobis necessitatibus quis ad officiis doloremque ab, blanditiis facere possimus obcaecati voluptate sed!</p>
<p>Voluptas, ipsa porro? Ex nostrum culpa magnam magni officiis laboriosam fugit molestias amet reiciendis sunt facere, debitis odit neque totam natus ad aliquam minus, sed repellat eveniet, et impedit ipsa.</p>
</div>
</div>
html {
color-scheme: light dark;
}
body {
margin: 3rem;
font-size: 2rem;
font-family: system-ui;
}
.quick-example {
margin: 1rem;
padding: 1rem;
background: hsl(200 50% 50% / 0.4);
border-radius: 0.5rem;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
}
.quick-example > div {
overflow: hidden;
}
.quick-example:hover {
grid-template-rows: 1fr;
}
Demo
Thanks for this. It helped me in one of the challenging height animation implementations.
You’re welcome! I’m glad to hear that the information was helpful for your height animation implementation. If you have any more questions or need further assistance, feel free to ask. Happy coding!