一.transition的属性及值
距离 : transition: 值1，值2，值3
值1:谁做动画，一般选者all，
值2：做动画的时间
值3:运动的曲线，
1.ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线（0.25,0.1,0.25,1.0）。（默认）
2.linear:（匀速），linear函数等同于贝塞尔曲线（0.0,0.0,1。0,1.0）
3.ease-in：（加速），ease-in 函数等同于贝塞尔曲线（0.42,0,1.0,1.0）
4.ease-out：（减速），ease-out函数等同于贝塞尔曲线（0,0,0.58,1.0）
5.ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线（0.42,0,0.58,1.0）
6.cubic-bezier:贝塞尔曲线；
注意1:谁做动画就给谁加 注意2:做动画必须中间得有数值变化的过程，像display:none就不能做动画。
二 @keyframes
1.先定义好动画:
@keyframes 动画的名称 接变化的过程0-100%，完成的变化
2.使用动画
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state 指定动画是否正在运行或已暂停。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
必选项: 定义动画的名称，实现这个过程花费的时间
三.实现一个二级导航的案例
<style>
li {
/* position: absolute; */
position: relative;
left: -40px;
top: -67px;
opacity: 0;
transition: all 0.5s;
list-style: none;
text-align: center;
line-height: 50px;
width: 100px;
height: 50px;
border: 1px solid #ccc;
}
ul {
/* display: none; */
width: 0px;
height: 0px;
top: -15px;
left: -40px;
}
div {
position: relative;
margin: 240px auto;
width: 100px;
height: 50px;
background-color: goldenrod;
text-align: center;
line-height: 50px;
border: 1px solid gold;
}
div:hover li {
top: -15px;
opacity: 1;
animation: move 6s infinite;
}
@keyframes move {
0% {
transform: rotateZ(0deg);
}
17% {
transform: rotateZ(0deg);
/* transform: translateY(0px); */
}
34% {
/* transform: rotatey(180deg); */
transform: rotateZ(180deg);
/* transform: translateY(-20px); */
}
51% {
/* transform: rotatey(270deg); */
transform: rotateZ(270deg);
/* transform: translateY(-40px); */
}
68% {
/* transform: rotatey(360deg); */
transform: rotateZ(-180deg);
/* transform: translateY(-60px); */
}
85% {
transform: rotateZ(-270deg);
transform: translateY(-80px);
}
100% {
transform: rotateZ(-360deg);
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div>
我是一级菜单
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>