transform 和 opacity 组合是 h5 零卡顿动画最可靠方式，因二者由 gpu 加速、不触发重排重绘，稳定 60fps；需规范 transition 写法、可控触发时机，并按场景选用对应组合。
用 transform 和 opacity 组合做过渡动效，是 H5 页面实现零卡顿动画最可靠的方式。核心在于这两个属性由 GPU 加速处理，不触发重排（reflow）和重绘（repaint），即使在低端手机上也能稳定跑满 60fps。
为什么必须选 transform + opacity
浏览器对 transform（如 translateX、translateY、scale）和 opacity 的变化做了深度优化，它们属于“合成层属性”，只走 Composite 阶段，跳过 Layout 和 Paint。而 left、top、width、height 等属性每次变化都会强制重排，列表中多个元素同时动就会明显掉帧。
- transform 位移不改变文档流，不会挤占其他元素位置
- opacity 变化天然支持过渡，且无视觉突变
- 两者可叠加使用（比如边缩放边上浮再变透明），仍保持高性能
transition 写法要规范
过渡声明必须写在基础选择器上，不能只挂在 hover 或 .active 类里，否则回弹时没动画。属性要明确列出，避免用 transition: all —— 它会意外触发 color、border 等低效属性的过渡。
- 正确写法：.card { transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
- 初始状态设为：opacity: 0; transform: translateY(20px) scale(0.95);
- 触发状态（如 .card--in）设为：opacity: 1; transform: translateY(0) scale(1);
触发时机要可控
靠 :hover 或点击加 class 只适合简单交互；真实业务中推荐用 IntersectionObserver 监听视口入场，配合 JS 动态添加类名。这样既避免滚动中频繁计算，又能精准控制每个卡片的进场节奏。
- 不建议用 setTimeout 模拟延迟入场——时间难同步，易错帧
- 复杂序列动画（如瀑布流逐个飞入）可用 requestAnimationFrame 做帧级调度
- 首屏关键动效建议加 will-change: transform, opacity，提示浏览器提前升层（但别滥用，每页最多 2~3 处）
常见组合与适用场景
不同交互目的对应不同 transform + opacity 组合，效果自然且性能一致：
- 卡片淡入上滑：translateY(30px) → translateY(0) + opacity: 0 → 1
- 按钮悬停缩放+半透：scale(1) → scale(1.08) + opacity: 1 → 0.92
- 模态框入场：scale(0.9) + opacity: 0 → scale(1) + opacity: 1
- 图片懒加载淡显：opacity: 0 → 1（配合 img.onload 后加类，不依赖 width/height 变化）
