The first rule of animating on the web: don’t animate
height. It forces the browser to recalculate a bunch of stuff and it’s slow (or “expensive” as they say). If you can get away with it, animating any
transform property is faster (and “cheaper”).
transform can be tricky. Check out how complex this menu open/close animation becomes in order to make it really performant. Rik Schennink blogs about another tricky situation:
border-radius. When you animate … Read article “Animating CSS Width and Height Without the Squish Effect”