如何使用CSS动画合成实现贝塞尔曲线运动
在网页动效开发中，贝塞尔曲线运动可以模拟出符合物理规律的自然运动轨迹，比如物体的抛物线移动、缓动弹跳效果等。CSS本身没有直接的贝塞尔曲线运动属性，但是可以通过动画合成的方式，结合@keyframes关键帧动画和cubic-bezier()贝塞尔函数，实现复杂的贝塞尔曲线运动效果。
核心原理
贝塞尔曲线运动本质上是元素在X轴和Y轴上不同速率位移的合成效果。我们可以通过两个独立的动画分别控制元素在水平方向和垂直方向的位移速率，两个方向的位移速率按照贝塞尔曲线的规律变化，最终叠加得到整体的贝塞尔曲线运动轨迹。
其中cubic-bezier()函数用于自定义三次贝塞尔曲线，它的四个参数分别对应贝塞尔曲线的两个控制点坐标，语法为cubic-bezier(x1, y1, x2, y2)，参数取值范围通常为0到1，超出范围会产生回弹等特殊效果。
实现步骤
1. 创建基础HTML结构
首先我们需要一个用于运动的元素，结构非常简单：
<div class="bezier-box"></div>
2. 定义基础样式
给运动元素设置基础的宽高、背景色，方便观察运动轨迹：
.bezier-box {
width: 40px;
height: 40px;
background-color: #409eff;
border-radius: 4px;
position: relative;
/* 初始位置在左上角 */
left: 0;
top: 0;
}3. 定义水平方向动画
水平方向动画控制元素在X轴的位移，我们使用cubic-bezier()定义水平方向的速率变化，比如实现一个先慢后快再慢的水平运动：
@keyframes moveX {
0% {
left: 0;
}
100% {
left: 400px;
}
}4. 定义垂直方向动画
垂直方向动画控制元素在Y轴的位移，同样使用cubic-bezier()定义垂直方向的速率变化，这里我们可以让垂直方向的运动速率和水平方向形成错落，从而形成曲线轨迹：
@keyframes moveY {
0% {
top: 0;
}
100% {
top: 300px;
}
}5. 合成动画实现贝塞尔曲线运动
将两个方向动画同时应用到元素上，并且分别给两个动画设置合适的cubic-bezier()时间函数，调整动画时长和贝塞尔参数，就可以得到不同的贝塞尔曲线运动效果：
.bezier-box {
width: 40px;
height: 40px;
background-color: #409eff;
border-radius: 4px;
position: relative;
left: 0;
top: 0;
/* 水平方向动画：使用先慢后快再慢的贝塞尔曲线 */
animation: moveX 3s cubic-bezier(0.32, 0, 0.67, 1) forwards;
/* 垂直方向动画：使用先快后慢的贝塞尔曲线 */
animation: moveY 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
/* 合并两个动画 */
animation-name: moveX, moveY;
animation-duration: 3s, 3s;
animation-timing-function: cubic-bezier(0.32, 0, 0.67, 1), cubic-bezier(0.33, 1, 0.68, 1);
animation-fill-mode: forwards, forwards;
}上面的代码中，元素同时执行moveX和moveY两个动画，水平方向从0移动到400px，垂直方向从0移动到300px，两个方向的速率变化由不同的cubic-bezier()控制，最终元素的运动轨迹就是一条贝塞尔曲线。
常见贝塞尔曲线运动示例
抛物线运动
抛物线运动是非常常见的贝塞尔曲线运动，实现原理是水平方向匀速运动，垂直方向做先加速后减速的运动，模拟重力作用下的抛物线轨迹：
@keyframes parabolaX {
0% { left: 0; }
100% { left: 500px; }
}
@keyframes parabolaY {
0% { top: 0; }
50% { top: 300px; }
100% { top: 0; }
}
.parabola-box {
width: 40px;
height: 40px;
background-color: #f56c6c;
border-radius: 50%;
position: relative;
left: 0;
top: 0;
animation-name: parabolaX, parabolaY;
animation-duration: 3s, 3s;
/* 水平方向匀速 */
animation-timing-function: linear, cubic-bezier(0.5, 0, 0.5, 1);
animation-fill-mode: forwards, forwards;
}弹跳缓动运动
弹跳效果可以通过垂直方向的多段贝塞尔曲线动画实现，模拟物体落地弹跳的衰减效果：
@keyframes bounceY {
0% { top: 0; }
30% { top: 300px; }
50% { top: 150px; }
70% { top: 300px; }
85% { top: 250px; }
100% { top: 300px; }
}
.bounce-box {
width: 40px;
height: 40px;
background-color: #67c23a;
border-radius: 50%;
position: relative;
left: 100px;
top: 0;
animation: bounceY 2s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}注意事项
使用
position: relative或者position: absolute配合left/top属性控制位移时，要注意父元素的定位属性，避免位移参照对象错误。如果两个动画时长不一致，会导致运动轨迹偏离预期的贝塞尔曲线，尽量保证合成动画的时长相同。
cubic-bezier()的参数可以根据需求调整，也可以直接使用在线贝塞尔曲线生成工具生成参数，工具地址可以参考https://www.ipipp.com。如果不需要动画结束后元素回到初始位置，记得给动画添加
forwards填充模式，让元素停留在动画结束的状态。
总结
CSS动画合成实现贝塞尔曲线运动的核心是拆分运动维度，分别控制X轴和Y轴的位移速率，通过cubic-bezier()函数自定义每个维度的速率变化曲线，最终合成得到整体的贝塞尔曲线运动效果。这种方式不需要依赖JavaScript，性能更好，适合实现简单的UI动效。如果需要更复杂的动态轨迹，也可以结合CSS变量和JavaScript动态修改贝塞尔参数，实现更灵活的效果。