按钮弹入动画应使用 transform: translateY(20px) 与 opacity: 0 初始隐藏，配合带回弹的 @keyframes 和 cubic-bezier 缓动，通过 animation-fill-mode: forwards 保持终态，并在 DOM 挂载后用 requestAnimationFrame 触发。
按钮初始隐藏时用 transform: translateY(20px) 定位
弹入动画本质是位置变化，transform 比 top 或 margin 更高效且不触发重排。按钮默认应处于「不可见但占位」或「完全脱离文档流但视觉上在下方」的位置。推荐设为 transform: translateY(20px)，配合 opacity: 0，避免用户误点未加载完的按钮。
关键点：
- 必须同时设置
opacity: 0和transform: translateY(20px)，否则动画开始前可能短暂闪现 - 不要用
visibility: hidden，它会让元素无法参与动画（visibility不支持过渡） - 若按钮父容器有
overflow: hidden，需确保translateY(20px)不被裁剪（可临时加padding-bottom: 20px或改用scale(0.95)辅助）
定义 @keyframes 从下往上弹入并轻微回弹
纯线性 translateY(0) 显得机械。加入小幅度 overshoot（比如到 -5px 再回弹到 0），能模拟真实物理弹跳感。注意：回弹不是必须，但少了它，动画容易显得“干瘪”。
@keyframes popIn {
0% {
transform: translateY(20px) scale(0.95);
opacity: 0;
}
70% {
transform: translateY(-5px) scale(1.05);
opacity: 1;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
scale(0.95) → scale(1.05) → scale(1)强化弹入张力，和translateY协同更自然 - 动画总时长建议 0.4s–0.6s；过短没感知，过长拖慢交互节奏
- 缓动函数用
cubic-bezier(0.22, 0.61, 0.36, 1)（类似ease-out加一点弹性）比默认ease更贴合弹入意图
绑定动画到按钮类，用 animation-fill-mode: forwards 保持终态
动画播完后按钮必须停留在最终状态（transform: translateY(0), opacity: 1），否则会瞬间跳回初始位置。这靠 animation-fill-mode: forwards 实现，缺它等于白写。
示例 CSS：
.btn--pop-in {
opacity: 0;
transform: translateY(20px);
animation: popIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
注意：
- 不要在按钮上直接写
animation内联样式——不利于复用和 JS 控制显隐 - 如果按钮需要「再次点击后重新弹入」，得先移除类、强制重绘（如
offsetHeight）、再加回类，否则动画不会重复触发 - 移动端 Safari 对
forwards支持稳定，但旧版 Android WebView 可能有 bug，可加备用规则：opacity: 1; transform: translateY(0);写在类末尾兜底
JS 触发时机：等 DOM 插入后再加动画类，别在 DOMContentLoaded 就急着加
常见错误是页面一加载就给按钮加 btn--pop-in 类，结果按钮还没渲染进 DOM，动画不执行。正确做法是确保元素已挂载。
安全触发方式：
- 若按钮由 JS 动态创建，插入 DOM 后立即加类：
buttonEl.classList.add('btn--pop-in') - 若按钮静态存在但延迟显示（如模态框内），在
show()方法里加类，而非初始化时 - 避免用
setTimeout(..., 0)模拟“下一帧”，改用requestAnimationFrame更精准：requestAnimationFrame(() => { buttonEl.classList.add('btn--pop-in'); });
最易被忽略的是：动画类名一旦加上，就无法靠 CSS 自动重播。需要手动控制开关——比如按钮隐藏后再显示，得先 remove 再 add 类，中间还得清一下浏览器对动画状态的缓存。