Houdini Animation Worklet 不存在且未被任何主流浏览器实现；当前唯一可靠的合成线程动画方案是 CSS @property 配合 transform/opacity 等可合成属性，通过 Web Animations API 驱动。
Houdini Animation Worklet 目前无法用于编写合成线程运行的自定义动画——它根本不存在。 浏览器尚未实现 AnimationWorklet，也没有任何主流浏览器支持该规范草案中的 API。你查到的文档、示例或 polyfill 都是过时的实验性内容，或混淆了 PaintWorklet / LayoutWorklet 与已废弃的 Animation Worklet 提案。
为什么找不到 AnimationWorklet 的可用实现
Chrome 在 2018 年曾短暂启用过 AnimationWorklet（需开启 flag），但很快被移除；W3C 工作组于 2021 年正式将该模块从 Houdini 路线图中撤下。当前所有“Animation Worklet”相关代码都会抛出 ReferenceError: AnimationWorklet is not defined 或直接静默失败。
- Chrome 120+、Firefox 120+、Safari 17+ 均无
AnimationWorklet全局对象 -
registerAnimator函数从未进入标准，也未在任何稳定版中落地 - 所谓“合成线程动画”依赖的底层机制（如独立的 worklet 线程调度 + compositor binding）未被引擎实现
现在能真正跑在合成线程的自定义动画方案
唯一可靠路径是通过 CSS @property + transform/opacity 触发硬件加速，并用 requestAnimationFrame 或 Web Animations API 驱动——这些属性变更可被合成器直接消费，无需主线程 layout/paint。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须将动画目标限定为
transform、opacity、filter（部分浏览器）等可合成属性 - 使用
@property定义自定义 CSS 属性并指定syntax: "<number>"和inherits: false，才能参与插值 - 用
element.animate()传入含自定义属性的 keyframes，浏览器会将其映射到底层可合成通道（如通过transform动态计算） - 避免在
animate()中写left/top或触发重排的属性，否则掉出合成线程
element.animate(
[
{ '--my-scale': 1 },
{ '--my-scale': 2 }
],
{
duration: 300,
easing: 'ease-out'
}
);
别再试这些无效操作
以下写法全部无效，且容易浪费调试时间：
立即学习“前端免费学习笔记（深入）”；
- 试图调用
animationWorklet.addModule('animator.js')——animationWorklet不存在 - 在 worker 中写
registerAnimator('my-anim', class {...})—— 无此函数，语法报错 - 用
new WorkletAnimation(...)构造实例 —— 该类从未标准化，TypeScript 类型定义也是伪造的 - 依赖
npm install houdini-animation-worklet等包 —— 全是 mock 实现，运行时无效果
真正可控的合成线程动画，目前只存在于 CSS 层级的声明式能力边界内；任何想绕过 CSS 引擎、用 JS 直接写合成帧逻辑的需求，现阶段只能退回到 will-change: transform + requestAnimationFrame 手动更新 transform 字符串——这虽在主线程计算，但只要不触发 layout，仍能保持 60fps 合成输出。细节在于控制粒度和避免强制同步布局。
