关键帧
Keyframe
中级通用关键帧（Keyframe）是在动画时间轴上指定某个时刻的属性值，由系统计算这些时刻之间的变化。它帮你把“先淡入、再上移、最后停住”说清楚，而不必逐帧描述画面。
你可能会说：「我想让结果卡片出现时先淡入，再往上移动一点，最后稳稳停住。」
读之前建议先了解
动手看看文件同步完成提示
上移时长
上移节奏
改动参数会自动重播，也可以点重播。留意提示先从透明变清晰、同时向上移动，最后停在右下角。这里用淡入和上移两组关键帧叠在一起。
每组预设都只指定起点和终点；中间每一帧的位置与透明度由浏览器补出来。调整时长，终点在时间轴上的时刻也会跟着变。
要点关键帧怎样决定画面变化？
- 1
在时间点上指定属性值
你可以把关键帧理解成动画里的几个路标：开始时卡片透明且偏下，中途变得可见，结束时回到原位。每个路标写的是那个时刻的状态，不是从头到尾的每一帧。
- 2
中间画面由系统补出来
两个关键帧之间，浏览器或动画工具会计算属性如何变化。因为你只指定几个时刻，所以能用较少的描述做出连续运动；具体运动节奏还会受到时长和缓动设置影响。
- 3
选择能连续变化的属性
做网页动效时，透明度和位移适合用来描述卡片的出现过程。你给 AI Agent 提需求时，说清哪个元素、在哪些时间点改变哪些属性，比只说“做得灵动一点”更容易得到可检查的结果。
容易混淆的地方
关键帧规定“哪些时刻是什么样”，缓动规定两个时刻之间变化得快还是慢。过渡通常用来处理属性从一个状态变到另一个状态，比如鼠标悬停后按钮变色；如果你想安排“先淡入、再移动、最后停住”这样的多段过程，关键帧更方便。
什么时候用
适合用
- AI 工具生成回答后，你想让结果卡片分阶段淡入、上移，并在指定位置停住。
- 做网站首屏时，你想安排标题、说明文字和按钮按不同时间点依次出现。
- 制作产品演示动图时，你想标出光标和界面元素在几个关键时刻的位置。
不适合用
- 按钮悬停时只需从原色平滑变成高亮色，用状态变化配合 CSS 过渡更直接。
- 用户点击后立刻显示错误提示，不需要运动过程；直接切换状态并呈现提示即可。
- 实时进度条要跟随实际任务进度，应该绑定任务状态，而不是用预设关键帧假装任务在推进。
练一练选一个答案，看看解释
你在做 AI 写作工具：生成结束后，结果卡片要先从透明变为可见，再向上移动一点并停住。怎样向 AI Agent 描述更合适？
让 AI 帮你做复制给 AI Agent 直接用
请为 AI 写作结果卡片制作入场动画：用关键帧指定开始时透明且略微偏下、中途变为可见、结束时回到原位。说明动画时长和缓动设置；用户偏好减少动效时，直接显示最终状态。