可靠滑入需显式声明初始transform并配animation-fill-mode: forwards，否则会跳变或弹回；方向值符号必须正确，百分比基于自身宽高计算。
直接用 transform: translateX() 或 translateY() 把元素初始位置设到视口外，再动画回到 0，就能实现可靠滑入。关键不是“怎么动”，而是“怎么不跳变”和“怎么停住”。
为什么初始 transform 必须显式声明
浏览器默认不记录元素的 transform 状态。如果只在 @keyframes 里写 from { transform: translateX(-100%) }，但元素本身没设初始 transform，动画第一帧会从 none 跳到 translateX(-100%)，造成视觉闪动或错位。
- 必须在基础样式里写死初始状态，比如
.slide-in { transform: translateX(-100%); } - 百分比是相对于元素自身宽高计算的，不是父容器——所以对 flex 项、
inline元素或 width 自适应内容也稳定 - 如果用 JS 控制类名触发，初始状态要和动画起始帧严格一致，否则会补帧
animation-fill-mode: forwards 不是可选项
动画播完后，元素默认恢复原始 transform 值（比如 none），导致它“弹回”原位。不用 forwards，滑入就只是“一闪而过”。
- 必须配
animation: slideIn 0.4s ease-out forwards;，否则终态留不住 -
forwards只保留最后一帧的 computed style，不影响其他属性（比如opacity需单独设） - 如果同时用
transition和@keyframes混用，forwards优先级高于 transition 的终态
左右滑入 vs 上下滑入：参数方向别反了
方向错一个符号，动画就跑偏。左滑入 ≠ 右滑入，上滑入 ≠ 下滑入，本质是位移向量方向不同。
立即学习“前端免费学习笔记（深入）”；
- 从左滑入：初始
transform: translateX(-100%)→ 动画到translateX(0) - 从右滑入：初始
transform: translateX(100%)→ 动画到translateX(0) - 从上滑入：用
translateY(-100%)，注意不是负号写成正号 - 从下滑入（比如底部弹窗）：初始
transform: translateY(100%)，不是-100%
真正容易被忽略的是：滑入动画的“停住”依赖于 forwards + 初始 transform 的双重锁定，缺一不可；而方向值一旦写反，调试时往往只看到“没动”，却查不出是符号错了还是单位错了。
