CSS Hack! Animate Height from 0 to Auto

site profile thumbnail


In this example we'll explore a unique solution to a common problem with CSS Transitions - animating height from 0 to auto (the natural text flow). Keith J. Grant has a great solution using the grid-template-rows property that we will get set up in a Webflow project using a simple accordion as an example. https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/

Related Made in Webflow Projects