CSS transition 和 @keyframes 无法实现真正抛物运动，因其仅支持一维时间缓动，不能独立控制 x(t) 和 y(t) 的加速度叠加；真抛物运动需 JS 结合 requestAnimationFrame 实时计算物理轨迹。
CSS transition 无法真正实现抛物运动
纯 CSS 的 transition 和 @keyframes 只能基于时间函数（timing-function）做一维缓动，它控制的是「属性值随时间的变化速率」，不是物理位移。所谓“抛物线”，本质是 x(t) 和 y(t) 两个方向上独立的、带加速度的运动叠加——而 CSS 动画只能对单个属性（比如 transform）做整体插值，没法让水平匀速、垂直先加速后减速地分别演算。
常见误解是用 cubic-bezier(0.17, 0.67, 0.83, 0.67) 模拟“弹跳感”，但这只是视觉近似，不是真实抛物轨迹；一旦涉及斜向位移或碰撞检测，立刻露馅。
用 @keyframes + cubic-bezier 模拟回弹效果的实操边界
如果你只需要“看起来像弹一下”的入场/退出动效（比如按钮点击反馈、卡片飞入），可以用多段 @keyframes 配合非线性贝塞尔曲线逼近回弹节奏，但必须接受：这不是物理模拟，只是经验性调参。
-
transform: translateY()和scale()同时动画比单用位移更容易出“弹”感 - 第一段下落用
cubic-bezier(0.34, 1.56, 0.64, 1)（快进慢出），落地瞬间加scale(1.1)，反弹段用cubic-bezier(0.22, 0.08, 0.15, 0.99)（慢进快出） - 别试图用一个
@keyframes覆盖全程：分 3 段（下落→压扁→回弹）更可控，每段用animation-fill-mode: forwards衔接 - 移动端要注意
will-change: transform防止闪屏，但别滥用——只在动画触发前加，结束后立刻移除
真抛物运动必须交给 JavaScript
只要需求里出现“初速度”“重力系数”“碰撞反弹衰减”“实时鼠标跟随轨迹”，CSS 就该让位。CSS 不提供时间戳、不暴露当前帧位置、不能响应 requestAnimationFrame 的逐帧计算。
立即学习“前端免费学习笔记（深入）”；
最轻量的做法是用 transform: translate(x, y) 作为渲染出口，所有物理逻辑在 JS 里跑：
- 用
requestAnimationFrame每帧更新x = v₀ₓ × t，y = v₀ᵧ × t + 0.5 × g × t² - 碰到边界时翻转对应方向速度，并乘以阻尼系数（如
0.85） - 把算出的
x、y塞进element.style.transform = `translate(${x}px, ${y}px)` - 避免直接操作
top/left——会触发重排，transform是合成层，性能差不了几个数量级
容易被忽略的兼容性坑
你以为写完 @keyframes 就完了？这些细节实际项目里天天踩：
- CSS 自定义属性（
--x,--y）不能直接用于@keyframes内插值，得靠 JS 注入或预编译；否则 fallback 到静态值 -
transform: translate(var(--x), var(--y))在 Safari 15.4 之前不支持变量动画，得用style.setProperty()手动设 - IE 完全不支持
cubic-bezier超出 [0,1] 范围的值（比如上面提到的(0.34, 1.56, ...)），会静默降级为ease，结果就是“没弹感” - 安卓 WebView 旧版本对
will-change处理异常，有时反而卡顿，上线前务必真机测
回弹不是加个 ease-out 就完事的事，它背后是时间采样精度、渲染管线调度、以及你愿不愿意为 0.3 秒动效多写 20 行 JS 的权衡。
