本文主要是介绍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)
这篇关于CSS：让动画流畅生动的缓动函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
