.tab-content{
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .8s;
-moz-transition: max-height .8s;
-ms-transition: max-height .8s;
-o-transition: max-height .8s;
transition: max-height .8s;
}
.tab{
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
margin-top: 10px;
overflow: hidden;
border:1px solid #CCC;
border-radius:5px;
/* 动画差 */
-webkit-transition: max-height .2s;
-moz-transition: max-height .2s;
-ms-transition: max-height .2s;
-o-transition: max-height .2s;
transition: max-height .2s;
}
.tab h2{
cursor:pointer;
padding:10px 20px;
background: #EEE;
border-top:1px solid #BBB;
border-bottom:1px solid #BBB;
margin:-1px 0;
color:#333;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
}
.tab h2:hover{
background: lightblue;
}
.tab h2:hover ~ .tab-content{// 开始动画
max-height: 200px;
}
<h1>CSS3 缓动手风琴动画效果（一丝）</h1>
<p>使用「max-height」实现自适应高度</p>
<ul class="tab">
<li>
<h2>选项卡1</h2>
<div class="tab-content">
<p>隐藏的文字<br>
隐藏的文字<br>
隐藏的文字<br>
</p>
</div>
</li>
<li>
<h2>选项卡2</h2>
<div class="tab-content">
<p>隐藏的文字<br>
隐藏的文字<br>
隐藏的文字<br>
隐藏的文字<br>
隐藏的文字<br>
隐藏的文字
</p>
</div>
</li>
</ul>