过渡：通过过渡transition，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另外一种样式时为元素添加效果，要实现这一点，必须规定两项内容：
1.规定希望把效果添加到哪个CSS属性上
2.规定效果的时长
transition-property:添加过渡效果的样式属性名称
transition-duration:过渡效果的耗时:以秒作为单位
transition-timing-function:设置时间函数--控制运动的速度（linear匀速）
transition-delay:过渡效果的延迟
简写：transition:属性名称 过渡时间 时间函数 延迟
如果给多个属性添加过渡：transition:属性名称 过渡时间 时间函数 延迟,属性名称 过渡时间 时间函数 延迟;
/*使用建议：因为transition最早是由webkit内核浏览器提出来的，而一些老版本的浏览器不支持，IE浏览器在十以上的版本才支持transition。所以在应用transition时需要添加上各自的前缀*/
例如：
-moz-transition:left 2s linear 0s;
-webkit-transition:left 2s linear 0s;
-o-transition:left 2s linear 0s;
手风琴菜单：
添加过渡效果：过渡效果只能从某一个具体的值到另一个具体的值
overflow:hidden 溢出隐藏
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴菜单</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
width: 200px;
height: auto;
margin: 100px auto;
}
.item {
width: 100%;
height: auto;
}
.item > h3 {
height: 40px;
line-height: 40px;
background-color: yellow;
color: red;
border-bottom: 2px solid #ccc;
padding-left: 20px;
}
.item > .itemul {
width: 100%;
height: 0px;
overflow: hidden;
transition-property: height;
transition-duration: 2s;
}
.item > .itemul > ul {
background-color: orange;
padding: 10px;
}
.item:hover > .itemul {
height: 80px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>公司信息</h3>
<div class="itemul">
<ul>
<li>关于我们</li>
<li>公司地址</li>
<li>联系电话</li>
</ul>
</div>
</div>
<div class="item">
<h3>公司信息</h3>
<div class="itemul">
<ul>
<li>关于我们</li>
<li>公司地址</li>
<li>联系电话</li>
</ul>
</div>
</div>
<div class="item">
<h3>公司信息</h3>
<div class="itemul">
<ul>
<li>关于我们</li>
<li>公司地址</li>
<li>联系电话</li>
</ul>
</div>
</div>
<div class="item">
<h3>公司信息</h3>
<div class="itemul">
<ul>
<li>关于我们</li>
<li>公司地址</li>
<li>联系电话</li>
</ul>
</div>
</div>
</div>
</body>
</html>
来源：https://blog.csdn.net/fangyuwuzhu/article/details/102777642