過渡：通過過渡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>
