CSS - 缓动函数
CSS 缓动函数用于控制元素两个状态之间过渡或动画的速度。它定义了属性随时间变化的速率，影响动画过程中的加速和减速。
以下是一些值得注意的要点
两个值之间的过渡可以应用于各种上下文，包括动画，以控制值变化的速率。
这允许在整个持续时间内动态调整动画速度。
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> 或 <percentage> 值。
三次贝塞尔曲线函数
CSS 中此功能定义了 贝塞尔曲线，这些曲线会影响动画或过渡的进度，并具有四个控制点：起点、终点和两个控制点。
它有助于创建自定义缓动效果。三次贝塞尔曲线函数由四个控制点定义，它允许精确控制动画的加速和减速。预定义的关键字值包括
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)，并且在开始时与 ease-in 类似，在结束时与 ease-out 类似。
<cubic-bezier()> - 此函数使用四个 <number> 值来定义曲线的形状。cubic-bezier(x1, y1, x2, y2)
X 坐标 (x1 和 x2) 表示时间比率，并且限制在 0 到 1 之间的值（动画不能比指定的时间提前开始或持续时间更长），而 Y 坐标 (y1 和 y2) 表示动画输出及其值。
阶梯函数
阶梯函数使动画能够以非连续的方式跳跃到特定数量的帧之间。您可以将其视为“滴答”动画。它接受以下关键字
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，在 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 缓动函数 - linear-easing
以下示例创建一个使用 linear-easing 函数水平移动的红色框。动画持续 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 缓动函数 - 带值的 linear-easing
以下示例演示了接受值的各种 linear-easing 函数。
动画从位置 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
以下示例演示了各种 cubic-bezier 函数。
ease-in 框开始缓慢然后加速，ease-out 框开始快速然后减速，ease-in-out 框开始缓慢，在中间加速，然后在动画结束时减速。
<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 缓动函数 - 带值的 cubic-bezier。
以下示例演示了各种带值的 cubic-bezier 函数。
通过此配置，会产生一个动画效果，其中每个框在使用不同的 cubic-bezier 计时函数从其初始位置向右移动 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 缓动函数 - step-easing
以下示例演示了各种 step-easing 函数。
<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>