CSS cubic-bezier() 语法
在 CSS 中，cubic-bezier() 函数用于定义三次贝塞尔曲线。它可以精确地控制 “CSS 动画” 或 “CSS 过渡” 的速度变化曲线。
通过设置四个控制点，cubic-bezier() 可以自定义各种速率，比如加速、减速、弹跳、回弹等，比起内置的速率函数（如 ease、linear 等），它提供了更强大的灵活性。
语法：
cubic-bezier(p1x, p1y, p2x, p2y)说明：
cubic-bezier() 函数只能用于 transition-timing-function 和 animation-timing-function 这两个属性。
cubic-bezier() 函数接受 4 个数值作为参数，它们定义了三次贝塞尔曲线的两个控制点 P1 和 P2。曲线的起始点 P0 始终是 (0, 0)，终点 P3 始终是 (1, 1)。
p1x, p1y： 第一个控制点 P1 的 x 和 y 坐标。p2x, p2y： 第二个控制点 P2 的 x 和 y 坐标。
这些点一起定义了一条从起点到终点的贝塞尔曲线，表示动画从开始到结束所经历的速度变化。
对于 cubic-bezier() 函数，小伙伴们还需要清楚以下两点：
- p1x 和 p2x（X 值）必须 在 0 到 1 之间，否则该语句无效。
- p1y 和 p2y（Y 值）可以大于 1 或小于 0，从而实现弹跳、过冲等视觉效果。
提示: 我们可以使用在线工具（例如 cubic-bezier.com）来可视化和生成自定义的 cubic-bezier() 值。
CSS cubic-bezier() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS cubic-bezier() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS cubic-bezier() 函数是如何使用的。
示例 1：cubic-bezier() 实现过渡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: lightskyblue;
transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
div:hover {
transform: translateX(300px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。当鼠标移动到小球上时，它会平滑地向右移动 300px。
分析：
在这个例子中，我们使用 transition 属性定义了一个过渡效果。其中，cubic-bezier(0.25, 0.1, 0.25, 1) 表示定义一种类似 ease-in-out 的缓动曲线。
示例 2：cubic-bezier() 实现弹跳效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: hotpink;
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
div:hover {
transform: translateY(150px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。当鼠标移到小球上时，它会突然跳动一下，像是 “弹了一下”。
分析：
需要注意的是，这里 cubic-bezier(0.68, -0.55, 0.27, 1.55) 中的 y 值超出了 0~1 的范围：
-0.55：开始时快速超调。1.55：结束时略微回弹。
通过使用这种参数组合，能模拟真实物体的弹性运动。
示例 3：cubic-bezier() 应用于 CSS 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: lightskyblue;
animation: slide 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。页面加载后，小球会不断左右来回滑动。
分析：
在这个例子中，我们使用了 animation 和 @keyframes 来定义一个动画帧。cubic-bezier(0.4, 0, 0.2, 1) 表示自定义了一种缓动曲线，可以使得整个滑动动画看起来更加自然、流畅。
