用途：当 CSS 动画或过渡在真机上卡顿、长页面滚动抖动、DevTools 反复出现布局或绘制工作时，用本技能约束动画与隔离写法，使动画停留在合成阶段，避免布局/绘制风暴。渲染管线为 Style→Layout→Paint→Composite，只命中 Composite 的过渡与动画开销低，逐帧命中 Layout 或 Paint 则昂贵。
主要能力：
- 仅合成规则：生产交互只动画 transform（translate、scale、rotate、skew、matrix）、opacity，以及层已提升时的 filter；禁止逐帧动画 top/left/right/bottom/inset、width/height、margin/padding、font-size/letter-spacing/line-height、box-shadow、大面积 background-color/color、border-radius 与边框宽度。
- will-change 生命周期：必须动态添加并在变化结束后移除，不得静态写入样式表；在 pointerenter 设置、pointerleave/animationend/transitionend 恢复 auto。过度使用会分配合成层与 GPU 内存，反而更差；命名会创建层叠上下文的属性会提前创建层叠上下文。
- contain 取值：content 是自包含组件（卡片、列表项、面板）的安全默认；strict 用于已知尺寸元素并附加尺寸包含，元素必须有显式或固有尺寸，否则塌缩为 0；layout 隔离内部布局并创建包含块/层叠上下文/BFC；paint 将后代裁剪到边框盒；style 限定计数器与引号；size 仅尺寸包含。
- content-visibility：auto 在离屏时跳过渲染、接近视口时渲染，隐含 contain: layout style paint，必须搭配 contain-intrinsic-size: auto <length>，否则离屏内容尺寸为 0，滚动条跳动、滚动位置漂移；hidden 跳过渲染但保留渲染状态，查找与无障碍树不可见；visible 为默认。
- @property：未类型化自定义属性无法插值，过渡会突变；用 @property 或 CSS.registerProperty() 注册为类型化后可插值，initial-value 必须计算独立（不能用 em、vh）。
使用方式：按决策树判断属性能否安全动画；不能则改用 transform/opacity 重写（位移用 translate、缩放用 scale、阴影出现用伪元素 opacity、大面积颜色交叉淡入用叠加层 opacity）；自定义属性先注册再动画；其余在 DevTools Performance 中剖析，若时间线出现 Layout 或 Paint 则视为不可并重写。will-change 仅在交互临近时设置并在结束事件移除。隔离按需选择 contain 或 content-visibility。
适用场景：长列表/超长页面的离屏跳过、卡片与面板的组件隔离、悬停提升与离开降级、用 scaleX 替代宽度动画、可动画渐变角度、虚拟化行与图片网格单元。
限制：资料未提供具体浏览器版本兼容细节之外的收费、平台或效果数据；contain: strict 无显式尺寸会塌缩为 0；content-visibility: hidden 不被查找与无障碍树看到；will-change 静态常驻会消耗 GPU 内存；动画未注册自定义属性会突变。反模式共八项，含动画 top/left/width/height/margin、will-change 常开或从不移除、content-visibility: auto 缺少 contain-intrinsic-size、动画 box-shadow、无尺寸用 strict、状态无关动画用 requestAnimationFrame 无限循环、动画未注册自定义属性。