一、过渡动画 transition
transition是一个过渡动画,它可以帮你在两个状态间的切换,实现 一个过渡的效果
先看代码
div{
width:100px;
height:100px;
background-color:red;
transition:all 1s linear 0.5s;
}
div:hover{
width:200px;
height:200px;
}
复制代码
transition后面的四个参数分别是:
- 你想要过渡的属性/默认是all (transition-property)
- 过渡的时间(transition-duration)
- 过渡的运动曲线 (transition-timing-function)
- 过渡前要暂停几秒 (transition-delay)
二、cubic-bezier
敲黑板!!!这里我不教你怎么解三阶贝塞尔曲线,但我教你怎么去使用cubic_bezier
这个属性
这是三阶贝塞尔曲线的公式P = (1-t)^2*P0 + 2*(1-t)*t*P1 + t^2*P2
不懂?没关系,你可以忘了上面的公式,看下图
根据高中数学,斜率越大,速度越大,这条曲线往上走,则是正向,往下走则是负向。好了懂了这个就好,看下图
看完上面的图,你可能还不懂,那我们开始实战
cubic-bezier(0.5,-1,0.5,2)
第一个坐标是(0.5,-1)而贝塞尔曲线的起点是(0,0),所以第一个坐标在起点的下方,即运动会先往负方向运动,再往正方向运动
第二个坐标是(0.5,2),而贝塞尔曲线的终点是(1,1)所以第二个坐标在终点的上方,即到达终点时的运动方向是负方向。
好了看动图
好了你是不是学会了呢,要注意的是t轴的坐标只能是在0~1
之间,不能超出这个范围,
想让运动有一个回退的动作,要么第一个坐标y轴低于0,要么第二个坐标y轴高于1,
黑色曲线的斜率即是运动的速度
cubic-bezier(t1,y1,t2,y2)
三、逐帧动画 animation
transition只能实现两个状态之间的切换,而animation可以实现多个状态的动画效果
animation两步走
- 定义动画
@keyframes run {
0%{ // 0%可以换成from
left:0px;
top:0px
}
25%{
left:100px;
top:0px;
}
50%{
left:100px;
top:100px;
}
75%{
left:0px;
top:100px
}
100%{ //100%可以换成to
left:0px;
top:0px
}
}
复制代码
- 应用动画
div{
animation:run 1s cubic-bezier(0.5,-1,0.5,2) 1s infinite reverse
//运动曲线不是整一个动画的速率,而是每段百分比的时间内都是这样的运动速率
}
复制代码
animation参数:
- animation-name 应用的动画名
- animation-duraiton 运动时间
- animation-timint-function 运动曲线
- animation-delay 运动前暂停多久
- animation-iteration-count 运动多少次// infinite无限次
- animation-direction 运动方向//是否轮流反向运动
- animation-play-state 规定运行或暂停
- animation-fill-mode 一般使用both,开始状态使用第一帧,结束后保留第一帧
四、steps配合animation
steps(步骤数量,end/start)
步骤数量是指完成这段动画要用几个步骤去做,步骤数量越多,动画越细腻
end 保留当前帧状态,直到这段动画时间结束 一般会失去最后一帧,用forward补救
start 保留下一帧状态,直到这段动画时间结束 一般会失去第一帧
用了steps后则不能再用cubic-bezier等运动曲线了
实例
@keyframes run{
0%{
left:0;
top:0;
}
25%{
left:100px;
top:0;
}
50%{
left:100px;
top:100px
}
75%{
left:0px;
top:100px;
}
100%{
left:0px;
top:0px;
}
}
div{
animation:run 4s steps(2,end)
}
复制代码
可以看到四段运动,每一段运动都是用两个步骤完成的
看另一个例子,理解end和start的区别
@keyframes run{
0%{
background:red;
}
25%{
background:blue;
}
50%{
background:yellow;
}
75%{
background:green;
}
100%{
background:black
}
}
div{
width:100px;
height:100px;
animation:run 4s steps(1,end)
}
复制代码
会发现5个颜色,失去了最后的黑色
使用end会保留当前帧直到动画结束,从0%到25%会保留0%的帧直到25%的动画结束,类推,从75%到100%会保留75%的帧直到100%动画结束,所以会失去最后一帧
start各位可以自己去做做,一般会失去第一帧
结语
因为本人水平有限,如果有错漏的地方,还请看官多多指正
本文作者胡志武,写于2019/5/24,如果要转载,请注明出处,
如果觉得写的不错, 请点个赞吧