CSS：让动画流畅生动的缓动函数

在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)