Brent Keller

Transitioning 'height: auto;'

December 30, 2019

Animating the height of an element using transition doesn't work when the element is transitioning to or from the value auto. Instead you can often achieve the desired effect by animating max-height to a target value that you know will cover your desired range.

.menu {
  min-height: 50px;
  max-height: 50px;
  transition: max-height 0.3s;
}

.menu.open {
  max-height: 400px;
}
© 2023 Brent Keller