如何将具有高度：0px的元素html动画化为height：auto（CSS）

Question

我正在尝试通过将鼠标移到div上方来生成动画，我希望将height增大到其height才能完全显示其内容。 效果必须是从height(height:0px)开始，从零到内容的total height(height:auto)

这是我的代码：

div{
	height: 0px;
	transition: all 0.5s ease;
	overflow: hidden;
	border:1px solid red;
}

div:hover{
	height:auto;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>

https://jsfiddle.net/df973ktr/

Answer 1

div {
  max-height: 0px;
  transition: all 0.5s ease;
  overflow: hidden;
  border: 1px solid red;
}

div:hover {
  max-height: 900px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>