金币下落弹跳动画需手写@keyframes：40%线性加速下落→15%底部压缩回弹→10%弱二次弹→剩余时间微晃停稳；须设transform-origin:bottom、animation-fill-mode:forwards、gpu加速，禁用iteration-count和alternate。
用 @keyframes 定义金币下落+弹跳的完整运动曲线
纯线性下落看着假，真实弹跳必须包含减速、触底压缩、回弹衰减。直接用 ease-out 或 steps() 都撑不起三次以上弹跳，得手写关键帧控制每段位移和时长比例。
- 第一段（下落）：
transform: translateY(0)→translateY(200px)，占总时长 40%，缓动用cubic-bezier(0.2, 0.7, 0.3, 1)模拟重力加速 - 第二段（首次触底反弹）：立刻缩放
scaleY(0.6)（模拟形变），再弹回scaleY(1)，同时上移translateY(-80px)，这段要快（占 15%），缓动用cubic-bezier(0.1, 0.9, 0.2, 1) - 第三段（二次弱弹）：只上移
translateY(-30px)，缩放保持 1，时长压到 10%，缓动更陡（cubic-bezier(0.1, 0.95, 0.15, 1)） - 最后停在目标位置：加一点轻微晃动（
rotate(1deg)→rotate(-0.5deg)→rotate(0)），避免僵直
animation 属性组合必须关掉 fill-mode 和重复逻辑
金币掉完就得静止在地面，不能循环或回退。很多人漏设 animation-fill-mode: forwards，导致动画一结束就闪回初始位置；或者误开 animation-iteration-count: infinite，结果满屏乱跳。
- 正确写法：
animation: coin-drop 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) 1 forwards - 总时长 1.8s 是按上面四段比例算出来的（比如 720ms + 270ms + 180ms + 630ms），别硬套固定值，要和 keyframes 里百分比对齐
- 不要用
animation-direction: alternate—— 弹跳不是来回对称运动，反向会破坏物理感
用 transform-origin 控制弹跳支点，避免飘忽
默认以元素中心为旋转/缩放原点，但金币触地时，形变和反弹应该从底部发生。不调 transform-origin，scaleY(0.6) 会把金币上下同时压扁，看起来像被拍扁而不是触地挤压。
- 给金币元素加：
transform-origin: bottom center - 如果金币是绝对定位且已设
bottom: 0，那transform-origin: bottom就够了，更精准 - 注意：这个设置必须写在触发动画的元素上，不能只写在 keyframes 里
性能关键：强制启用 GPU 加速，但慎用 will-change
大量金币同时掉落时，translateY 和 scale 本身是合成属性，但若页面有复杂层叠或滚动，仍可能掉帧。单纯加 transform: translateZ(0) 不够稳。
- 稳妥做法：在金币元素上加
transform: translateZ(0) scale(1)（触发 GPU 层），再配backface-visibility: hidden - 别滥用
will-change: transform—— 动画前就声明会让浏览器提前分配图层，金币数量多时内存暴涨，Chrome 会直接降级渲染 - 真要批量掉落？改用
requestAnimationFrame控制每帧生成 3–5 个金币，比一次性全加 animation 更顺
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
