纯CSS无法精确实现抛物线动画，因其@keyframes仅支持线性、缓动或分段关键帧，无法描述二次函数轨迹；推荐JS计算坐标+CSS硬件加速方案，或用两段cubic-bezier近似模拟。
用 transform + @keyframes 模拟抛物线不现实
纯 CSS 的 @keyframes 只支持线性、缓动（cubic-bezier）或分段关键帧，无法直接描述二次函数轨迹（如 y = ax² + bx + c）。强行用 20+ 个 top/left 关键帧逼近，不仅代码臃肿，还难以控制起止速度和物理感，且响应式下会错位。
推荐方案：CSS 配合 JS 控制 transform: translate()
让 JS 计算每个时间点的 x 和 y 坐标，再通过 element.style.transform = `translate(${x}px, ${y}px)` 实时更新。CSS 负责硬件加速（需开启 will-change: transform 或 transform: translateZ(0)），JS 负责数学逻辑。
- 抛物线公式建议用参数式：
x = v₀ₓ × t，y = v₀ᵧ × t − 0.5 × g × t²（更贴近真实投掷） - 时间
t用requestAnimationFrame控制，避免setInterval掉帧 - 初始速度
v₀ₓ/v₀ᵧ和重力g可调，比硬编码像素值更灵活 - 务必在动画开始前设置
element.style.transformOrigin = '0 0'，避免旋转类干扰
const ball = document.querySelector('.ball');
const duration = 1200; // ms
const g = 0.002;
const v0x = 2;
const v0y = -3;
<p>let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const t = currentTime - startTime;
if (t > duration) {
ball.style.transform = <code>translate(${v0x * duration}px, ${v0y * duration - 0.5 * g * duration ** 2}px)</code>;
return;
}
const x = v0x <em> t;
const y = v0y </em> t - 0.5 <em> g </em> t * t;
ball.style.transform = <code>translate(${x}px, ${y}px)</code>;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);如果必须纯 CSS：用 cubic-bezier 近似上升+减速+下坠
虽然不是数学意义的抛物线，但人眼对「先快后慢上升、再加速下落」有强感知。可用两个贝塞尔曲线拼接：前半段用 cubic-bezier(0.3, 1.2, 0.5, 1)（模拟上抛减速），后半段用 cubic-bezier(0.5, 0, 0.7, -0.2)（模拟下落加速）。注意：负的 y 值在贝塞尔中合法，但需确保容器 overflow: visible，否则裁剪。
- 不能只靠一个
cubic-bezier覆盖全程——它只能表达单调变化，无法同时表现上升减速与下降加速 - 必须拆成两段动画，用
animation-fill-mode: forwards衔接，且第二段animation-delay设为第一段时间 -
top或transform都可，但后者性能更好；若用top，父容器需设position: relative
容易被忽略的细节：坐标系方向与单位一致性
CSS 的 y 轴向下为正，而物理抛物线公式通常设向上为正。直接套用会导致球往天上飞。要么把公式里的 y 结果取负，要么把重力 g 设为正值并写成 y = -v₀ᵧ × t + 0.5 × g × t²。另外，JS 算出的像素值别直接拼进 transform 字符串——漏写 px 会静默失败；CSS 自定义属性（--x, --y）配合 calc() 是更健壮的传值方式，但兼容性需查 transform: translate(var(--x), var(--y)) 是否被支持。
立即学习“前端免费学习笔记（深入）”；
