从下往上弹出动画需用@keyframes定义translateY(100vh)到translateY(0)，配合opacity变化，加animation-fill-mode:forwards保持终态，避免布局干扰和重排以确保流畅。
用 @keyframes 定义从下往上弹出的动画
核心思路是让元素初始位置在视口下方（transform: translateY(100vh)），再通过 @keyframes 过渡到原位（translateY(0)）。注意别用 100%，它相对自身高度，容易失效；100vh 才能确保从屏幕底部外开始。
@keyframes slideUp {
from {
transform: translateY(100vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
给元素添加 animation 并控制触发时机
动画默认一加载就执行，但如果你希望它只在元素进入视口或点击后才动，就得配合 JS 控制 animation 的启停。纯 CSS 方案下，直接加在元素上即可，但要注意：动画不会自动重播，刷新页面才会再次触发。
- 加
animation-fill-mode: forwards保证动画结束后保持最终状态（否则会闪回初始位置） - 加
animation-duration和animation-timing-function控制速度感，比如cubic-bezier(0.25, 0.46, 0.45, 0.94)模拟自然弹跳感 - 避免写
animation: slideUp 0.4s ease-out这种简写漏掉forwards，导致动画一结束就消失
常见错误：元素没动、闪一下、或位置偏移
多数问题出在父容器或自身布局干扰了 transform 的渲染上下文：
-
position: absolute或fixed元素如果父级没设position: relative，translateY可能参考错坐标系 - 元素本身有
margin-bottom或flex布局的align-items影响了初始占位，导致“弹出”看起来像抖动 - 动画中同时改
height或display，会强制重排，破坏transform的 GPU 加速，卡顿明显 - 没加
opacity动画，导致元素在弹出前就可见，视觉上像“先出现再上移”
兼容性与性能提醒
transform + @keyframes 在现代浏览器中没问题，但 iOS Safari 旧版本（translateY(100vh) 解析不准，可能只下移一点点。稳妥做法是用 translateY(200%) 或 JS 动态计算高度。
立即学习“前端免费学习笔记（深入）”；
- 动画元素建议加
will-change: transform提前提示浏览器优化（但别滥用，尤其在列表项里） - 不要在
:hover或滚动监听里高频触发动画，容易触发合成层爆炸 - 如果弹出逻辑复杂（比如按顺序逐个出现），别硬塞多个
animation-delay，改用 JS 控制类名更可控
