CSS内容平滑过渡！可以自定义由左向右滑动或由下向上拉出！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div> <ul> <li>linear：平滑过渡。</li>
</ul>
</div>
<style>
.aa {
width: 220px;
}
.aa ul li {
position: relative;
left: 8px;
width: 220px;
margin: 1px 5px;
padding: 10px;
border: 1px solid #ddd;
background-color: #eee;
color: #000;
-moz-transition-property: left;
-moz-transition-duration: .5s;
-webkit-transition-property: left;
-webkit-transition-duration: .5s;
-o-transition-property: left;
-o-transition-duration: .5s;
transition-property: left;
transition-duration: .5s;
list-style: none;
}
.aa ul li:hover {
left: 50px;
}
.aa ul li:nth-child(2) {
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
</style>
</body>
</html>
