一.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>