纯CSS可模拟下落与撞击：分自由落体（cubic-bezier加速）、瞬间挤压（translateY微陷+scaleY压扁）、弹性回弹（过冲后复位），需transform-origin: bottom center联动控制，慎用scaleX和border-radius。
用 transform + keyframes 模拟下落与撞击瞬间
纯 CSS 无法真实模拟物理引擎，但能通过关键帧动画伪造“下落→触底→挤压→回弹”的视觉节奏。核心是把整个过程拆成三段：自由落体（加速）、撞击变形（短暂压扁）、弹性回弹（减速恢复）。不能只靠 translateY 线性位移，必须配合 scaleY 的非对称缩放。
- 下落阶段用
cubic-bezier(0.2, 0.7, 0.4, 1)模拟重力加速度，避免匀速下降的虚假感 - 撞击点（约 80% 动画时长处）设为
scaleY(0.7)，持续不超过 0.05s，否则像卡顿而非冲击 - 回弹部分要带轻微过冲（如
scaleY(1.05)），再回落到1，否则显得僵硬
@keyframes 中 scaleY 和 translateY 必须同步控制
常见错误是只缩放不位移，或位移和缩放时间轴错开——结果物体像在原地“噗”一下变扁，没下落感。挤压变形必须发生在触底瞬间，而触底位置由 translateY 决定，所以两个属性要在同一关键帧节点联动。
@keyframes fallAndBounce {
0% {
transform: translateY(-100px) scaleY(1);
}
75% {
transform: translateY(200px) scaleY(1); /* 到达底部 */
}
80% {
transform: translateY(205px) scaleY(0.75); /* 微微下沉 + 挤压 */
}
90% {
transform: translateY(195px) scaleY(1.08); /* 回弹略高 + 过冲 */
}
100% {
transform: translateY(200px) scaleY(1); /* 回稳 */
}
}
注意：translateY(205px) 是关键——它让元素“陷下去”一点，配合 scaleY(0.75) 才有真实挤压感；若只缩放不位移，就是平面压扁，失去三维错觉。
用 transform-origin 控制挤压方向
默认 transform-origin 是元素中心，但真实撞击时底部受力更大，变形应从底部开始。把原点设为 bottom center，能让 scaleY 压缩时顶部上移、底部不动，更符合物理直觉。
- 对块级元素：加
transform-origin: bottom center; - 若元素有
border-radius，挤压时圆角会畸变，建议在挤压帧中临时设border-radius: 0，回弹后再恢复 - 慎用
scaleX：除非刻意表现横向扩散，否则单向scaleY更安全，避免意外拉宽破坏布局
性能与兼容性陷阱
在低端设备上，高频 transform 动画可能掉帧，尤其叠加多个挤压动画时。不要用 left/top 替代 transform，前者触发重排，后者走合成器层。
- 务必加
will-change: transform;到动画元素，提前提示浏览器优化 - IE 不支持
transform-origin的bottom center写法（只认两个值），需降级为bottom - 如果容器有
overflow: hidden，挤压时元素可能被裁剪——检查父容器是否留出足够余量
真正难的是让挤压看起来“有质量感”：太慢像果冻，太快像幻灯片。多调 0.03s 的持续时间和 0.05 的 scaleY 差值，比换缓动函数影响更大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
