过渡效果 只针对特定的数值有效，针对某些属性值（block），是无效的。
过渡：
可以在不适用flash动画或JavaScript的情况下，当元素从1中样式变化成另一种样式时，为元素添加效果。要实现这一点，必须规定两项内容：
1.规定希望把效果添加到那个css属性上，
2.规定效果的时长。
语法：transition:property |duration |timing-function |delay;
property:规定设置过渡效果的css属性的名称。
duration：规定设置过渡效果需要多少秒或毫秒。
timing-function：规定速度效果的速度曲线。
delay：定义过渡效果何时开始执行。
<html>
<head>
<meta charset="utf-8">
<title>过渡01</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
/* 添加过渡效果: 过渡效果执行完后，默认会回到原始状态。 */
/* 1.property 添加过渡效果的样式属性名称 */
/* transition-property: left; */
/* 2.过渡效果耗时 */
/* transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s; */
/* 简写：transition:属性名 过渡时间 时间函数 延迟 */
/* transition: left 2s linear 2s; */
/* 为多个样式同时添加过渡效果 */
/* transition:left 2s linear 0s, background-color 2s linear 0s; */
/* 为所有样式添加过渡效果
1.所有样式的过渡效果一样
2.效率低下，它会去查询所有添加的样式，
建议不要这么写。使用上面多个样式同时添加效果的样式处理。
3.stpe（4）：可以让过渡效果分为指定的几步来完成, 但是很多浏览器不支持。
*/
transition: all 2s steps(4);
/* 兼容适配不同的浏览器 */
-moz-transition: all 2s steps(4);
-webkit-transition: all 2s steps(4);
-moz-transition: all 2s steps(4);
}
/* 单击事件, 需要一直按着div */
div:active {
left: 1000px;
background-color: #008000
}
</style>
</head>
<body>
<div></div>
</body>
</html>========================
手风琴下拉菜单效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴下拉菜单效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.menu {
width: 200px;
height: auto;
margin: 100px auto;
}
.item {
width: 100%;
height: auto;
}
.item>h3 {
height: 40px;
line-height: 40px;
background-color: #7dffe7;
color: orange;
padding-left: 10px;
border-bottom: 2px solid #CCCCCC;
}
.item>.itemBox {
width: 100%;
height: 0px;
/* 默认隐藏数据*/
overflow: hidden;
/* display: none; */
/* 添加过渡效果：过渡效果智能产生从某个具体值，到另外一个具体的值的过渡
无法为一些状态值添加过渡效果，只能给具体的值 添加过渡效果。*/
/* 1 为那些设置css样式添加过渡效果, 2 耗时 */
transition-property: height;
transition-duration: 1s;
}
.item>.itemBox>ul {
list-style: none;
background-color: #eaffb6;
padding: 15px;
margin: 0;
}
/* h3:hover >.itemBox{} */
/* 为item添加hover伪类 */
.item:hover>.itemBox {
/* display: block; */
/* 显示子菜单*/
height: 110px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>国内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳好地方</li>
<li>深圳房价高</li>
<li>深圳有华为</li>
<li>深圳ZTE总部在那边</li>
</ul>
</div>
</div>
<div class="item">
<h3>国际新闻</h3>
<div class="itemBox">
<ul>
<li>金三胖坐绿皮</li>
<li>特朗普狗似的</li>
<li>打倒小日本</li>
<li>国际新闻3</li>
</ul>
</div>
</div>
<div class="item">
<h3>体育新闻</h3>
<div class="itemBox">
<ul>
<li>宁泽涛退役了。</li>
<li>姚明砍下40分</li>
<li>阿联坐火车</li>
<li>C罗不踢球</li>
</ul>
</div>
</div>
<div class="item">
<h3>娱乐新闻</h3>
<div class="itemBox">
<ul>
<li>杨幂看小孩</li>
<li>周杰伦唱歌</li>
<li>沙发</li>
<li>发电房</li>
</ul>
</div>
</div>
</div>
</body>
</html>