@keyframes滑入动画核心是用translatex(±100%)从视口外移入，百分比基于元素自身宽；需显式设初始transform避免跳变；推荐js控制类名触发，配合animation-fill-mode:forwards保持终态。
用 @keyframes 定义从左/右外滑入的位移路径
核心是让元素初始位置在视口外（比如 translateX(-100%) 或 translateX(100%)），再过渡到 translateX(0)。注意这里的百分比是相对于元素自身宽度计算的，不是父容器——所以对不定宽元素也可靠。
常见写法：
@keyframes slideInFromLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slideInFromRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
别直接用 left/right 配合 position: relative 做，那样会触发重排，性能差，且百分比含义易混淆。
给元素绑定动画时必须设置 transform 初始态
CSS 动画不会自动“记住”你没写的初始 transform 值。如果元素本身没设 transform，浏览器会从 none 开始插值，而 none 和 translateX(-100%) 不是同类型值，导致动画不执行或跳变。
立即学习“前端免费学习笔记（深入）”；
正确做法是显式声明初始状态：
- 用
transform: translateX(-100%)初始化元素（可配合opacity: 0） - 再通过添加类名触发动画，例如：
.box.slide-in同时含animation和目标transform: translateX(0) - 或者用
animation-fill-mode: forwards锁定结束态，避免动画结束后弹回
translateX 进场动画的兼容性与性能要点
所有现代浏览器都支持 transform 的硬件加速，但要注意几个实际卡点：
-
translateX必须搭配transform使用，单独写translateX()无效（CSS 属性名是transform，不是translateX） - IE10+ 支持
transform，但需要-ms-transform前缀；不过现在基本可忽略 - 如果父容器有
overflow: hidden，确保元素初始位置确实在裁剪区外，否则看不到滑入效果 - 动画时长建议 ≥ 300ms，太短人眼难感知；过长（>600ms）易被当成加载延迟
触发时机：用 JS 控制动画类名比 CSS 自动播放更可控
直接写 animation: slideInFromLeft 0.4s ease-out 会让元素一挂载就动，不适合滚动进场、点击触发等场景。
推荐用 JS 动态加类：
const box = document.querySelector('.box');
// 滚动到可视区时触发
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-in');
observer.unobserve(entry.target);
}
});
});
observer.observe(box);
对应 CSS 中定义：.box.slide-in { animation: slideInFromLeft 0.4s ease-out forwards; }。这样能避免页面一打开就乱动，也方便复用和调试。
真正容易被忽略的是：动画结束后元素的 transform 值是否影响后续布局或交互——animation-fill-mode: forwards 能保持最终 transform，但如果之后 JS 又去读 getBoundingClientRect()，拿到的位置仍是原始 DOM 位置，不是视觉位置。这点在做联动动画或拖拽时得特别小心。
