使用keyframes和贝塞尔曲线实现自定义动画轨迹
在前端动画开发中，@keyframes规则用于定义动画的关键帧序列，而贝塞尔曲线（cubic-bezier()）可以自定义动画的速度变化曲线，两者结合能够实现复杂的运动轨迹效果。本文将演示如何创建从起点(295,0)到终点(600,1000)、总时长2秒的动画效果。
核心概念说明
@keyframes规则
@keyframes用于定义动画在不同时间点的状态，通过百分比（0%到100%）或者关键词（from、to）指定关键帧，浏览器会自动补全中间过渡状态。
贝塞尔曲线
CSS中的animation-timing-function属性可以设置动画的速度曲线，默认提供ease、linear等预设值，也可以通过cubic-bezier(x1,y1,x2,y2)自定义曲线，四个参数分别对应控制点的坐标，取值范围通常在0到1之间，超出范围可以实现弹性等特殊效果。
transform位移属性
实现元素位置移动通常使用transform的translate()函数，相比直接修改top、left等属性，transform的动画性能更好，不会触发页面的重排重绘。
完整实现示例
以下是实现指定轨迹动画的完整代码，包含HTML结构和CSS样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义动画轨迹示例</title>
<style>
/* 定义动画关键帧 */
@keyframes customMove {
from {
/* 起点位置：x=295px，y=0px */
transform: translate(295px, 0);
}
to {
/* 终点位置：x=600px，y=1000px */
transform: translate(600px, 1000px);
}
}
.animate-element {
width: 50px;
height: 50px;
background-color: #4a90e2;
border-radius: 8px;
/* 应用动画：名称 时长 速度曲线 无限循环 */
animation: customMove 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
/* 可选：添加参考坐标系方便观察 */
.coordinate-system {
position: relative;
width: 800px;
height: 1200px;
border: 1px solid #ddd;
margin-top: 20px;
}
.start-point, .end-point {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
.start-point {
left: 295px;
top: 0;
background-color: #ff4d4f;
}
.end-point {
left: 600px;
top: 1000px;
background-color: #52c41a;
}
</style>
</head>
<body>
<h3>动画轨迹演示</h3>
<div class="coordinate-system">
<div class="start-point"></div>
<div class="end-point"></div>
<div class="animate-element"></div>
</div>
</body>
</html>代码解析
@keyframes customMove定义了动画的两个关键帧，from对应0%时间点，设置元素初始位置为(295,0)；to对应100%时间点，设置元素终点位置为(600,1000)。animation属性简写格式为：animation: 动画名称 时长 速度曲线 循环次数，这里设置动画总时长为2秒，速度曲线使用cubic-bezier(0.25, 0.1, 0.25, 1)（等同于预设的ease曲线），infinite表示无限循环播放。参考坐标系部分添加了起点和终点的标记，方便直观观察动画的运动范围。
自定义贝塞尔曲线调整运动效果
如果需要调整动画的速度变化，可以修改cubic-bezier()的参数，例如：
匀速运动：
cubic-bezier(0, 0, 1, 1)，等同于linear先慢后快：
cubic-bezier(0.42, 0, 1, 1)，等同于ease-in先快后慢：
cubic-bezier(0, 0, 0.58, 1)，等同于ease-out弹性效果：
cubic-bezier(0.68, -0.55, 0.27, 1.55)，y值超出1范围会产生回弹效果
如果需要实现更复杂的非线性轨迹（比如曲线运动），可以在@keyframes中添加更多中间关键帧，分别设置不同时间点的translate值，配合贝塞尔曲线即可实现更丰富的运动效果。