描述：
css中animation的使用，可演示过渡的效果。。。下拉列表的演示效果
效果演示：
1
2
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation：1</title>
<style>
div{
width: 100px;
height: 100px;
background-color: bisque;
}
div > ul{
width: 360px;
height: 72px;
background-color: aqua;
display: none;
border-radius: 10px;
}
div:hover > ul{
display: block;
animation: aa 2s;
}
@keyframes aa{
from{
width: 310px;
height: 0px;
}
to{
width: 360px;
height: 72px;
border-radius: 10px;
}
}
div>ul>li>span{
float: right;
display: none;
}
div > ul > li:hover > span{
display: block;
background-color: rgb(58, 65, 65);
color: white;
width: 360px;
height: 72px;
animation: aa 2s;
border-radius: 10px;
}
p{
width: 200px;
height: 100px;
background-color: blue;
}
@keyframes duls{
from{
width: 310px;
height: 0px;
}
to{
width: 360px;
height: 72px;
border-radius: 10px;
}
}
</style>
</head>
<body>
animation：1
<h1>animation：1</h1>
<div>
导航
<ul>
<li>
导航1
<span>1</span>
</li>
<li>
导航2
<span>2</span>
</li>
<li>
导航3
<span>3</span>
</li>
</ul>
</div>
<p>
</p>
</body>
</html>
