Intersection Observer 实现滚动动画的最小可行写法是：元素挂载后立即创建 Observer，配置 rootMargin（如"0px 0px -100px 0px"兼容旧 Safari）和 threshold 数组，回调中仅对 isIntersecting 为 true 的 entry 添加含 animation-fill-mode: forwards 的动画类，并立即 unobserve。
Intersection Observer 触发滚动动画的最小可行写法
直接用 IntersectionObserver 监听元素进入视口，比监听 window.onscroll 更轻量、更可靠——它不随滚动频繁触发，也不受节流误判影响。
常见错误是等 DOM 渲染完才初始化 Observer，结果首屏元素没被观测到；或者漏掉 rootMargin，导致动画在元素刚露头时就执行，用户根本看不到过渡过程。
- 必须在元素挂载后（如
document.querySelectorAll(".anim-trigger")有结果）再创建 Observer -
rootMargin: "0px 0px -20% 0px"是常用值：让动画提前在元素还有 20% 高度未进入视口时启动，避免“闪入” - 回调中对每个
entry要检查entry.isIntersecting，否则元素移出视口时也会触发（可能造成重复动画）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("animate-in");
observer.unobserve(entry.target); // 动画只执行一次
}
});
}, { rootMargin: "0px 0px -20% 0px" });
<p>document.querySelectorAll(".anim-trigger").forEach(el => observer.observe(el));CSS 动画类名要配 animation-fill-mode: forwards
否则动画播完立刻回退到初始状态，比如 translateY(0) → translateY(20px) 播完又弹回 0，视觉上就是“动一下又消失”。
立即学习“前端免费学习笔记（深入）”；
另一个坑是把 opacity 和位移动画写在同一个 @keyframes 里但没设起始透明度，导致元素默认 opacity: 0 却没隐藏，布局占位异常。
- 动画类必须含
animation-fill-mode: forwards - 若用
opacity，初始状态得显式设为opacity: 0，且确保父容器没强制撑高 - 避免在动画中改
height或display，会触发重排，卡顿明显
.animate-in {
opacity: 0;
transform: translateY(30px);
animation: slideIn 0.6s ease-out forwards;
}
@keyframes slideIn {
to {
opacity: 1;
transform: translateY(0);
}
}兼容性兜底：Safari 15.4 以下不支持 rootMargin 百分比值
Safari ≤15.4 会直接忽略 rootMargin: "-20%"，退化成 "0px"，导致动画触发太晚甚至不触发。这不是 bug，是规范早期实现差异。
不能靠 UA 判断，因为 iOS WebView 行为也不一致；稳妥做法是用像素值替代，或加一层 JS 计算。
- 最简方案：把
rootMargin改成"0px 0px -100px 0px"（假设平均设备视口高度约 500px，-20% ≈ -100px） - 进阶方案：用
window.innerHeight * 0.2动态算像素值，再拼字符串传给rootMargin - 不推荐 fallback 到 scroll 监听——性能和体验差距太大，真要兼容老 Safari 就老实做降级动画（如无位移，只淡入）
多个动画顺序错乱？别依赖 DOM 顺序，用 threshold 分层控制
当一页有十几个动效元素，按 DOM 顺序 observe 后，它们几乎同时触发，看不出逐个浮现的节奏感。想实现“从上到下依次入场”，靠 CSS animation-delay 不稳定（JS 添加 class 时间不可控），也不该手动 setTimeout。
真正可控的方式是用 threshold 数组，让不同区域的元素在不同相交比例时触发。
- 例如：首屏大图设
threshold: [0.1]（10% 进入即动），正文段落设threshold: [0.3]，底部按钮设threshold: [0.6] - 每个元素可单独 new Observer，或用一个 Observer +
entry.intersectionRatio做条件分支 - 注意
threshold是数组，不是单个数字，写成[0.3]而非0.3（后者会被忽略）
CSS 滚动动画的复杂点不在 JS 或 CSS 单独哪一块，而在于三者咬合：Observer 的触发时机、CSS 动画的起始状态、以及不同设备视口尺寸对 rootMargin 的实际影响。少盯住其中一环，效果就容易断层。
