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