CSS easing() 函数用于控制元素两个状态之间的过渡或动画的速度。它定义了属性随时间的变化率，影响动画过程中的加速和减速。
以下是一些值得注意的点:
两个值之间的转换可以应用于各种上下文（包括动画），以控制值变化的速率。
这允许在整个过程中动态调整动画速度。
CSS <transitions> 和 <animations> 属性可以使用宽松函数进行自定义，以指定此行为。
函数类型
主要有以下三种CSS 中可以使用的缓动函数类型如下:
线性函数（linear），
三次贝塞尔函数（包括ease、ease-in、ease-out 和ease-in-out），
阶梯函数（steps）。
线性函数
使用线性计时函数，动画会以恒定的速度遍历关键帧。可以传递以下关键字:
linear - 动画以恒定速度进行。
linear-easing-function - 描述了 Linear() 函数，用于管理动画或过渡的进度。它使用停靠点列表，即 Linear-stop-list，其中每个点都指定为 0 到 1 之间的数字。这可以具有 <number> 或 <percentagenotransR 值。
三次贝塞尔函数
CSS 中的此功能定义 Bézier 曲线，通过四个控制点影响动画或过渡的进程:开始点、一个终点和两个控制点。
它有助于创建自定义缓动效果。三次贝塞尔函数由四个控制点定义，它允许精确控制动画的加速和减速。预定义的关键字值包括:
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)，其行为类似于开始时的缓入和结束时的缓出。
<cubic-bezier()> - 此函数使用四个 <number> 值来定义曲线的形状。 cubic-bezier(x1, y1, x2, y2)
X 坐标（x1 和 x2）表示时间比率，并限制为 0 到 1 之间的值（动画不能比指定的时间早或持续时间长） ，而Y坐标（y1和y2）代表动画输出及其值。
Steps函数
Steps函数使动画能够在特定数量的帧之间跳转以不连续的方式。您可以将其视为"滴答"动画。它接受以下关键字:
step-start - 该关键字表示缓动函数steps(1, Jump-start) 或steps(1, start)。它表示突然跳转到插值的最终状态，并保持此状态直到完成。
step-end - 该关键字表示缓动函数steps(1, Jump-end) 或steps(1, end) ）。这意味着插值保留其初始状态直到结束，然后快速更改为最终状态。
steps() - 此函数采用正 <integer> 和可选的 <step-position>。
<integer> - 表示均匀间隔或步长的数量。它应该是一个大于0的正整数，除非第二个参数是jump-none，在这种情况下它必须是一个大于1的正整数。
<step-position> -指定跳转发生的时间 - 要么在开始处，要么在结束处，要么在开始处和结束处，要么既不在开始处又在结束处。可用的关键字值包括:
jump-start - 这意味着初始跳转发生在开始处，基本上是在点 0 处，在 0% 标记处没有花费时间。
jump-end - 这意味着最后一次跳转正好发生在末尾，基本上是在点 1，没有在 0% 标记处花费时间。 100% 标记。如果未指定 <step-postion>，则这是默认值。
jump-none - 这会消除开头和结尾处的跳转，并在持续时间中省略一个步骤。进度保持稳定在 0% 和 100% 标记，持续时间通过将总持续时间除以步数 (1/n) 来确定。
jump-both - 这涉及开始和结束处的跳跃，发生在 0 和 1 点处。这有效地在两端添加了一个步骤，并且在 0% 和 100% 标记上不花费时间。
start - 与jump-start等效。
end- 与jump-end等效。
语法
/* linear function and keyword */
/* linear(<point-list>) */
linear(1, -0.5, 0)
linear
/* cubic-bezier function and keywords */
/* cubic-bezier(<x1>, <y1>, <x2>, <y2>) */
cubic-bezier(0.25, 0.1, 0.25, 1)
ease
ease-in
ease-out
ease-in-out
/* steps function and keywords */
/* steps(<number-of-steps>, <direction>) */
steps(4, end)
steps(10, jump-both)
step-start
step-end CSS 缓动函数: 线性缓动
以下示例创建一个使用线性缓动函数水平移动的红色框。动画持续时间为 4 秒，无限重复，导致盒子连续前后移动。
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
margin: 150px;
background-color: red;
text-align:center;
font-size:20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
animation: move 4s linear infinite;
}
@keyframes move {
0% {
left: 5%;
}
100% {
left: 60%;
}
}
</style>
</head>
<body>
<div class="box">Linear Easing Function</div>
</body>
</html> CSS 缓动函数: 带值的线性缓动
下面的示例演示了各种接受值的线性缓动函数。
动画从位置 0 开始，直接向前移动到 0.25。接下来，它继续沿直线前进，直到达到 1。动画在运行时的进度由符号 Linear(0, 0.25 75%, 1) 表示。
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
margin: 150px;
background-color: red;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
font-size:20px;
position: relative;
animation: move 4s linear infinite;
}
.linear-demo-1 {
animation-name: linear-custom;
animation-timing-function: linear(0, 0.25 75%, 1);
}
@keyframes linear-custom {
from {transform: translateX(0);}
to {transform: translateX(350px);}
}
</style>
</head>
<body>
<div class="box linear-demo-1">Linear Custom</div>
</body>
</html> CSS 缓动函数: cubic-bezier
以下示例演示了各种三次贝塞尔函数。
缓入框启动缓慢并加速，缓出框启动快速并减慢，并且缓入出框开始时很慢，中间加速，然后在动画结束时减速。
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0077FF;
margin: 20px auto;
animation-duration: 4s;
animation-iteration-count: infinite;
text-align: center;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.ease-in-demo {
animation-name: easeIn;
animation-timing-function: ease-in;
}
.ease-out-demo {
animation-name: easeOut;
animation-timing-function: ease-out;
}
.ease-in-out-demo {
animation-name: easeInOut;
animation-timing-function: ease-in-out;
}
@keyframes easeIn {
from {transform: translateX(0);}
to {transform: translateX(400px);}
}
@keyframes easeOut {
from {transform: translateX(0);}
to {transform: translateX(400px);}
}
@keyframes easeInOut {
from {transform: translateX(0);}
to {transform: translateX(400px);}
}
</style>
</head>
<body>
<div class="box ease-in-demo">Ease-in</div>
<div class="box ease-out-demo">Ease-out</div>
<div class="box ease-in-out-demo">Ease-in-out</div>
</body>
</html> CSS 缓动函数: 带值的立方贝塞尔曲线。
以下示例演示了带有值的各种三次贝塞尔函数。
通过此配置，可以生成动画效果，其中每个框在从其右侧前进 300 像素时具有不同的运动行为使用不同的三次贝塞尔计时函数的初始位置。
<html>
<head>
<style>
.box {
width: 120px;
height: 110px;
background-color: #e3bd56;
margin: 20px auto;
animation-duration: 4s;
animation-iteration-count: infinite;
text-align: center;
font-size: 20px;
left:10px;
display: flex;
justify-content: center;
align-items: center;
}
.cubic-bezier-demo-1 {
animation-name: cubicBezier1;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cubic-bezier-demo-2 {
animation-name: cubicBezier2;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.cubic-bezier-demo-3 {
animation-name: cubicBezier3;
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.cubic-bezier-demo-4 {
animation-name: cubicBezier4;
animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
@keyframes cubicBezier1 {
from {transform: translateX(0);}
to {transform: translateX(300px);}
}
@keyframes cubicBezier2 {
from {transform: translateX(0);}
to {transform: translateX(300px);}
}
@keyframes cubicBezier3 {
from {transform: translateX(0);}
to {transform: translateX(300px);}
}
@keyframes cubicBezier4 {
from {transform: translateX(0);}
to {transform: translateX(300px);}
}
</style>
</head>
<body>
<div class="box cubic-bezier-demo-1">Cubic Bezier (0.25, 0.1, 0.25, 1)</div>
<div class="box cubic-bezier-demo-2">Cubic Bezier (0.42, 0, 0.58, 1)</div>
<div class="box cubic-bezier-demo-3">Cubic Bezier (0.55, 0.055, 0.675, 0.19)</div>
<div class="box cubic-bezier-demo-4">Cubic Bezier (0.95, 0.05, 0.795, 0.035)</div>
</body>
</html> CSS 缓动函数: 步进缓动
以下示例演示了各种步进缓动函数。
<html>
<head>
<style>
body {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 50px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
margin: 10px;
animation: move 6s infinite;
}
.jump-start {
animation-timing-function:steps(6, jump-start);
}
.jump-end {
animation-timing-function:steps(6, jump-end);
}
.jump-both {
animation-timing-function:steps(6, jump-both);
}
.jump-none {
animation-timing-function:steps(6, jump-none);
}
.step-start {
animation-timing-function: step-start;
}
.step-end {
animation-timing-function: step-end;
}
.start {
animation-timing-function: steps(6, start);
}
.end {
animation-timing-function: steps(6, end);
}
@keyframes move {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(250px);
}
}
</style>
</head>
<body>
<div class="box jump-start">Jump-start</div>
<div class="box jump-end">Jump-end</div>
<div class="box jump-both">Jump-both</div>
<div class="box jump-none">Jump-none</div>
<div class="box step-start">Step-start</div>
<div class="box step-end">Step-end</div>
<div class="box start">Start</div>
<div class="box end">End</div>
</body>
</html>