最稳纯CSS卡片飞入动画用transform+opacity组合，因硬件加速不触发重排；初始设translateY(20px)和opacity:0，进场类中设为0和1，transition定义在基础选择器上，配合IntersectionObserver控制入场时机。
用 transform + opacity 做卡片飞入最稳
纯 CSS 实现卡片“飞入”动画，核心就是位移加透明度变化，transform: translateX() 或 translateY() 配合 opacity 是最可靠、性能最好的组合。浏览器对 transform 和 opacity 的动画做硬件加速，不会触发重排（reflow），滚动或交互时也不卡顿。
别用 left/top 做位移——会强制重排，尤其在列表中多个卡片同时进场时，掉帧明显；也别只靠 visibility 或 display 切换，它们不支持过渡（transition）。
实操建议：
- 初始状态设为
transform: translateY(20px)+opacity: 0 - 进场类名（如
.card--in）里写transform: translateY(0)+opacity: 1 - 过渡必须加在基础卡片选择器上，不是进场类名里：
.card { transition: opacity 0.4s ease, transform 0.4s ease; } - 动画触发时机靠 JS 添加类名最可控，比如监听
IntersectionObserver判断是否进入视口
用 IntersectionObserver 控制卡片入场时机
用户一打开页面就全播动画？体验差，还浪费资源。真正实用的“飞入”，是卡片快出现在屏幕里时再启动。原生 IntersectionObserver 就是干这事的，兼容性已覆盖所有现代浏览器（Chrome 51+/Firefox 55+/Safari 12.1+）。
立即学习“前端免费学习笔记（深入）”；
常见错误：用 window.onscroll + getBoundingClientRect() 手动判断——频繁触发、没节流、移动端卡顿明显，且容易漏判快速滚动场景。
实操建议：
- 初始化 observer 时设
threshold: 0.1（10% 进入视口即触发） - 对每个卡片调用
observer.observe(cardEl)，别用 document.querySelectorAll 一次性绑死 - 回调里只做一件事：给进区元素加
class="card--in"，让 CSS 动画自己跑 - 记得在回调里调用
observer.unobserve(entry.target)，避免重复触发（除非你要做“进出反复动”）
@keyframes 不如直接用 transition 简洁
有人一上来就写 @keyframes flyIn { from { ... } to { ... } }，再配 animation: flyIn 0.5s ease-out forwards。这能用，但多此一举——只要单次入场、不循环、不复杂路径，transition 更轻量、更易维护、更方便 JS 控制启停。
关键区别：transition 是“有状态切换就动”，animation 是“到时间就动”，前者和 class 切换天然契合，后者要额外管理 animation-play-state 或重置 animation-name 才能重播。
实操建议：
- 避免写
animation-fill-mode: forwards后又想 JS 改样式——容易被 animation 覆盖，调试困难 - 如果真要用
@keyframes（比如需要弹性效果cubic-bezier(0.2, 0.8, 0.4, 1)），务必把forwards和初始态对齐，否则动画结束瞬间会闪回 - 多个卡片同时入场？别用
animation-delay手动算时间差，改用 JS 给每个卡片加不同style.setProperty('--delay', i * 0.1 + 's')，CSS 里用transition-delay: var(--delay)
移动端 Safari 上 transform 动画偶尔抽风？加 will-change
极少数情况（尤其 iOS 15–16 的 Safari），transform 动画第一帧会卡顿或跳变，本质是渲染层没提前升格。这不是 bug，是浏览器懒优化策略——它默认不为可能动的元素预分配图层。
加 will-change: transform, opacity 可以提示浏览器：“这个元素马上要动了，请提前准备”。但它不是万能药，滥用反而增加内存开销。
实操建议：
- 只加在卡片本身，别加在父容器上
- 不要一开始就写死
will-change，而是在即将入场前 JS 动态加：cardEl.style.willChange = 'transform, opacity' - 动画结束后立刻清除：
cardEl.style.willChange = 'auto'（可放在transitionend事件里） - 如果卡片内容简单（纯色块+文字），其实可以不加——多数情况根本感知不到差别
真正难搞的是带阴影、渐变、border-radius 的卡片在低配安卓机上模糊或闪烁，那得靠 backface-visibility: hidden 或强制开启 GPU 层，但这已经超出“飞入”本身，属于渲染优化深水区了。
