在CSS中,可以使用transition属性或者@keyframes关键帧动画来创建动画效果。
使用缓动函数则可以让动画更加流畅和生动。
div {transition: <property> <duration> <timing-function> <delay>;
}div {animation: <keyframes-name> <duration> <timing-function>;
}
以上代码中的 timing-function
就是我们的缓动函数了
常见的缓动函数如下:
1、线性缓动函数
linear (point-list):
接受多个关键点作为参数,多个关键点可以实现在不同时间出现不同速率,速率的变化是直接转折的,用法如下
linear(0, 1) // 以固定的速度变化,等同于关键字linear
linear(0, 0.9, 1) // 50%的时间播放前90%的动画,剩下50%的时间播放完后10%的动画
linear(0, 0.5 20%, 0.8 60%, 1) // 前20%的时间 播放前50%的动画,中间40%的时间播放中间30%的动画,后面40%的时间播放剩下的20%的动画
关键字:
linear(线性): 元素以固定的速度变化,等价于缓动函数 linear(0, 1)。
2、三次贝塞尔缓动函数
cubic-bezier(x1, y1, x2, y2):
贝塞尔曲线缓动函数接受两个点坐标(参数值应在[0, 1]),以及作为起点的坐标(0,0),终点坐标(1,1) 通过控制这四个点的位置,可以创建更复杂的动画过渡效果。
关键字:
ease(慢-快-慢): 这是默认的缓动函数,元素会在开始和结束时较慢移动,而在中间会加速,等价于cubic-bezier(0.25, 0.1, 0.25, 1.0)。
ease-in(慢-快): 元素会开始时较慢,然后逐渐加快,等价于cubic-bezier(0.42, 0.0, 1.0, 1.0)。
ease-out(快-慢): 元素会以较快的速度开始,然后逐渐减速,等价于cubic-bezier(0.0, 0.0, 0.58, 1.0)。
ease-in-out(慢-快-慢): 动画元素会慢慢开始,加速移动,然后再减速结束,等价于cubic-bezier(0.42, 0.0, 0.58, 1.0)。
3、阶跃缓动函数
steps (number, start | end):
函数接受两个参数:第一个参数表示动画分为几布;第二个参数的start 表示每一布的变化时机。用法如下
// 假设动画持续4s,将 P 点从 0px 移动到 40px
steps (4, end) // 将动画分成4步,第1s P 点停留在0px,第1s末第2s初跳跃到10px,以此类推
steps (4, start) // 将动画分成4步,第1s P 点停留在10px,第1s末第2s初跳跃到20px,以此类推
关键字:
step-start: 等价于steps(1, start)
step-end: 等价于steps(1, end)