应优先使用 transform 和 opacity 实现动画，因其可走合成线程、避免重排重绘；响应式中禁用 resize 直接触发动画，改用 ResizeObserver + CSS 类过渡，并对独立动效容器启用 contain 优化。
用 transform 和 opacity 替代位置/颜色类动画
浏览器对 transform（如 translateX、scale）和 opacity 的动画能走合成层（compositor thread），不触发重排（layout）和重绘（paint），性能远高于修改 left、top、background-color 或 color。响应式页面常因媒体查询切换元素状态，若此时还用非合成属性做过渡，容易在中低端设备上掉帧。
- ✅ 推荐写法：
transition: transform 0.3s ease, opacity 0.3s ease; - ❌ 避免写法：
transition: left 0.3s ease, background-color 0.3s ease; - 注意：即使用了
transform，若同时触发will-change: transform且未合理清理，反而增加内存开销 —— 只在真正需要时动态添加，动画结束立即移除
媒体查询中慎用 @keyframes + animation
响应式设计里，有人会在不同断点下定义不同 @keyframes 并通过 animation 切换，这看似直观，但实际会带来两个隐患：一是所有关键帧规则无论是否生效都会被解析并驻留内存；二是动画启动/销毁频繁（比如 resize 触发多次断点切换），导致合成器反复创建/丢弃图层。
- 优先用
transition配合 class 切换（例如.card--mobile-enter→.card--mobile-enter-active） - 若必须用
animation，确保只在断点稳定后（如window.matchMedia回调中）才添加 class 启动，避免 resize 过程中反复触发 - 禁用
animation-play-state: paused来“暂停”动画——它仍占用合成资源；改用移除 class 或animation: none
避免在 resize 事件中直接触发动画
响应式布局常监听 resize 来调整元素尺寸或触发入场效果，但 resize 在桌面端高频触发（尤其拖拽窗口），直接在里面写 element.classList.add('animate-in') 会导致动画反复重置、卡顿甚至堆叠。
- 加防抖（debounce）：至少
50ms间隔，推荐用requestAnimationFrame节流 - 更优解：用
ResizeObserver替代resize事件，它只在元素尺寸真实变化后回调，且天然去抖 - 示例中不要在回调里直接操作 DOM 动画，而是标记状态，由 CSS 类控制过渡：
.panel { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .panel--collapsed { transform: scaleX(0); }
动画层级与 contain 属性配合
响应式页面常有多个可展开区域（如导航抽屉、筛选面板），它们的动画可能互相干扰渲染性能。此时单靠优化单个动画不够，需限制其影响范围。
立即学习“前端免费学习笔记（深入）”；
- 对独立交互动画容器添加
contain: layout paint style;，告诉浏览器该元素内部变化不会影响外部布局和绘制 - 特别适用于
position: fixed或absolute的模态层、侧边栏——它们脱离文档流，contain效果更明显 - 注意兼容性：
contain在 Safari 15.4+ 和 Chrome 52+ 支持良好，但旧版 iOS Safari 不支持；可用@supports (contain: paint)安全包裹
duration 和 easing 调，先确认它跑在哪条线程上。 
