引言
在电商网站中，“加入购物车”动画 是提升用户体验的经典交互之一。一个小小的商品图标从页面飘向购物车，不仅直观地反馈了操作结果，还能增加趣味性与沉浸感。
实现这一效果的方式有很多，比如 JavaScript 计算路径 + 动画，或者 CSS3 动画 + 贝塞尔曲线。本文将带你从 CSS 动画的基础 出发，逐步讲解如何利用 @keyframes、animation-timing-function 以及 多层容器组合 来实现一个优雅的 抛物线加入购物车效果，并提供完整代码案例。
基础代码示例
我们先来看一个利用 嵌套元素 来实现 X 轴匀速、Y
轴曲线运动的抛物线动画。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Parabola Animation</title></head><body><div class="container"><div class="box-x"><div class="box-y"><div class="box"></div></div></div></div></body><style>:root {--containerWidth: 400px;--containerHeight: 400px;}.container {width: var(--containerWidth);height: var(--containerHeight);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border: 1px solid black;}/* X 轴：匀速运动 */.box-x {animation: jumpX 0.8s infinite linear;}/* Y 轴：使用曲线模拟加速下落、减速上升 */.box-y {animation: jumpY 0.8s infinite cubic-bezier(0.75, 0.06, 0.94, 0.88);}.box {width: 30px;height: 30px;background-color: blueviolet;border-radius: 50%;}@keyframes jumpX {from {transform: translateX(0);}to {transform: translateX(calc(var(--containerWidth) - 30px));}}@keyframes jumpY {from {transform: translateY(0);}to {transform: translateY(calc(var(--containerHeight) - 30px));}}</style>
</html>
效果示例
为什么要用嵌套元素？
- 问题：
transform: translate(x, y)会同时作用于 X 和
Y，如果我们在一个元素上设置animation-timing-function，那么 X 和 Y
会同时受到影响。\ - 解决方案：通过嵌套结构，把 X 和 Y 的运动分开：
- 外层
.box-x只管 X 轴，并设置linear匀速运动； - 内层
.box-y只管 Y 轴，并用cubic-bezier调整速度曲线。
- 外层
这样就能实现一个接近 物理抛物线 的运动效果。
animation-timing-function 详解
animation-timing-function 控制动画在
时间进度与实际位置之间的映射关系。常见值如下：
-
linear
- 匀速运动，没有加速度。\
- 在本例中用于 X 轴运动。
animation-timing-function: linear; -
ease
- 默认值，开始和结束慢，中间快。
animation-timing-function: ease; -
ease-in
- 由慢到快，模拟加速进入。\
- 常用于模拟"加速下落"。
animation-timing-function: ease-in; -
ease-out
- 由快到慢，模拟减速停止。\
- 常用于"物体上升或停止"。
animation-timing-function: ease-out; -
ease-in-out
- 先加速，后减速。\
- 常用于"自然的往返运动"。
animation-timing-function: ease-in-out; -
cubic-bezier(n, n, n, n)
- 自定义贝塞尔曲线，范围为
0 ~ 1。\ - 我们示例中的参数
cubic-bezier(0.75, 0.06, 0.94, 0.88)，表现为
快速下落、缓慢上升，模拟重力加速度。
animation-timing-function: cubic-bezier(0.75, 0.06, 0.94, 0.88); - 自定义贝塞尔曲线，范围为
总结
- X 轴：使用
linear匀速，保证水平运动自然。\ - Y 轴：使用
cubic-bezier或
ease-in/ease-out，制造出"加速下落、减速上升"的效果。\ - 嵌套结构：分离 X 和 Y 的动画逻辑，是实现更复杂动画的常用技巧。
通过 animation-timing-function 的不同曲线组合，我们可以在纯 CSS
中模拟出接近物理效果的运动，增强动画的自然感。
✅ 建议：在实际项目中，如果需要更精确的物理效果（比如抛物线轨迹公式
y = ax² + bx + c），可以考虑使用 JavaScript +
requestAnimationFrame 来实现。
