悬停配色过渡：交互规则、默认参数与动效说明

触发方式

指针进入实际组件区域时进入，离开时退出；卡片空白处不触发，键盘聚焦与离焦等效。详情页播放按钮同步演示两侧：普通动效从初态进入终态，再返回初态一次；加载类按循环配置持续播放。暂停保留当前画面，继续时从暂停进度接续。

起点与终点

主体的背景色：#ffffff → #171717；主体的文字颜色：#171717 → #ffffff；整体的横向位移：0 → 0；整体的纵向位移：0 → 0；整体的缩放：1 → 1。

时序

总时长 220 ms，统一触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0.22, 1, 0.36, 1)。各轨道按配置中的 start / span 和 times 分阶段运行。

进入与退出

进入按关键帧正向运行，退出将关键帧、阶段顺序与时间点反转。完成后保留终态，不自动重复。

重复操作与打断

停止旧轨迹，保留当前画面作为新轨迹第一帧，转向最新目标；不排队。循环的新周期从本周期起点开始。

减少动态效果

遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "hover-invert",
  "durationMs": 220,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "face",
      "property": "backgroundColor",
      "values": [
        "#ffffff",
        "#171717"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    },
    {
      "part": "face",
      "property": "color",
      "values": [
        "#171717",
        "#ffffff"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ]
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：Reprise. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。