用途：当动画掉帧、悬停或滚动效果沉重、需要动画尺寸/位置/阴影、布局变化（卡片重排、元素跨容器移动）需平滑过渡、动画 height:auto，或审查动画性能时使用。
主要能力：核心规则是只动画 transform 与 opacity，把昂贵属性映射为廉价等价物——width/height 用 transform: scaleX()/scaleY()（真实尺寸用 FLIP），top/left/margin 用 transform: translate()，box-shadow 改为动画承载阴影的伪元素 opacity，filter: blur() 用两层 opacity 交叉淡入，background-position 用子层 translate()。提供 FLIP（First、Last、Invert、Play）以 transform 动画布局变化，DOM 最终落在真实布局；height:auto 可用 interpolate-size: allow-keywords 或 calc-size(auto, size)，跨浏览器回退用 CSS grid 的 0fr→1fr。避免布局抖动：先批量读取 offsetWidth、getBoundingClientRect 等，再统一写入。will-change 仅在动画前临时应用，空闲时移除。
使用方式：交付一个自包含 .html，依赖可走 CDN，动画由 CSS transition/@keyframes 或 Web Animations API 驱动，并带冻结机制（?t=N 设置 animationDelay 并暂停，或 anim.pause() 与 currentTime）。验证用无头浏览器在开始/中间/结束截图，并用 DevTools Performance 确认每帧只有 Composite Layers，无 Layout/Paint。
限制与注意：scaleX/scaleY 会拉伸文字与子元素，内容需清晰时用 FLIP；transform 百分比相对自身盒子；过度使用 will-change 或 translateZ(0) 会增加图层并损害性能；grid 折叠内容需 overflow: hidden 与 min-height: 0；非必要动效应置于 prefers-reduced-motion: reduce 之下。