关键在于初始状态需设为 transform: translateX(-100%) 且 opacity: 0，用独立类如 .slide-in 由 JS 动态添加触发，避免 animation-delay 和 layout 触发属性，确保兼容性与性能。
用 @keyframes 做从左到右滑入，关键不是动效本身，而是初始状态得藏好
元素默认就在页面上，直接加动画只会“闪一下”，必须让它一开始不可见且位置在视口外左侧。常见错误是只写了动画位移，却忘了设初始 transform: translateX(-100%) 或用 opacity: 0 配合控制可见性。
实操建议：
- 动画起点必须是
transform: translateX(-100%)（或-200px等具体值），终点是translateX(0) - 别只靠
visibility: hidden控制显示——它不触发重排，但动画开始时元素可能仍占布局空间；优先用opacity: 0+transform组合 - 如果父容器有
overflow: hidden，确保动画过程中元素不会被意外裁切（比如translateX(-100%)超出父容器左边界时）
animation 的触发时机：CSS 类切换比 animation-delay 更可控
很多人用 animation-delay: 0.5s 模拟“入场”，结果发现页面一加载就动，根本不是用户期待的“出现时才动”。真正可靠的触发方式，是 JS 添加类或 CSS 媒体查询/伪类配合，让动画只在条件满足时播放一次。
实操建议：
- 定义动画样式时，用独立 class（如
.slide-in），不要写在原始元素选择器里 - JS 中用
element.classList.add('slide-in')触发，避免用setTimeout模拟延迟——DOM 渲染时机不稳定 - 慎用
animation-fill-mode: forwards：它会让动画结束后保留终点样式，但如果后续要 JS 修改位置，可能和transform冲突
兼容性坑：IE 和旧 Safari 对 transform 和 @keyframes 的处理很不一样
IE10+ 支持 @keyframes，但必须带 -ms- 前缀；iOS Safari 9.3 以下对 transform: translateX() 的硬件加速支持弱，容易卡顿甚至跳帧。
实操建议：
- 需要兼容 IE 时，补全前缀：
@-ms-keyframes slideIn { ... }，并在animation属性中也写上带前缀的版本 - 移动端优先加
will-change: transform（仅对触发动画的元素），但别滥用——它会提前分配图层，影响内存 - 测试时重点看“首次进入”是否流畅：有些浏览器会把动画拆成两帧（先渲染初始态再启动动画），这时加
animation-timing-function: linear反而更稳
性能提醒：别在 @keyframes 里改 left/top，用 transform 是底线
用 left: -100px → left: 0 触发的是 layout + paint，每帧都重排；而 transform: translateX() 只走合成器，能跑满 60fps。这个区别在长列表或低配设备上特别明显。
实操建议：
- 绝对不要在 keyframes 中写
left、top、width、height等触发布局的属性 - 如果元素本身是
position: absolute，仍推荐用transform而非left—— 它们视觉效果一致，但性能差一个数量级 - 动画时间别设太短（如
0.1s），人眼感知不到，还可能因渲染管线未就绪导致“没动就结束了”
动画本身很简单，难的是判断“什么时候该动”和“动完之后要不要恢复状态”。很多 bug 其实出在 JS 控制类的时机，而不是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
