I’ve recently worked on a couple of projects where I’ve needed to animate the height of an element. Due to varying markup structures and project requirements, I used different techniques to accomplish this animation. I experimented with animating the height, max-height, and scale(Y) of and element.
There are two pros to animating height with scale(Y). The first is that you don't need to know what the height of the element will be. This is because you can animate scale(Y) to 1, which is the full height of an element. The second is that it works if you are animating multiple elements that have different heights.
The con to animating height with scale(Y) is that the element will always take up its full height, even when scale(Y) is set to 0. Scale(Y) doesn't affect the flow of surrounding elements, so they won't adjust to take up the apparent empty space of an element with a scale(Y) value of less than 1. Tympanus has an article that goes more in depth about transforms and how content does or doesn't reflow.
The pro to animating an element's height using height is that the elements around what's being animated reflow while its height is less than its full height.
The con to animating with height is that you need to know the exact height of the element being animated. If the height value you animate to is smaller than the element's actual height, part of the element will be cut off. If it's larger, there will be extra space between the element that's being animated and the element below it.
There are two pros to animating the height of an element with max-height. The first is that the elements around what's being animated reflow when it's smaller than its full height. The second is that you don't need to know the exact height of what's being animated. Max-height is especially useful when working with dynamic content.
The con to animating with max-height is the possibility of a jarring animation. If the max-height you animate to is a lot larger than the actual height of the element, the animation will run very quickly.