产品与设计 · 动效
动画Animation
为动画定义目的与结束条件：成功反馈播一次停在稳定结果，装饰循环可暂停/关闭，减动效时跳过运动但结果仍在。
保存成功后，动画该播成什么样
一个「保存」反馈：一次性动画会自己停在「已保存 ✓」；切到循环档看装饰动画如何持续并停住；勾减动效再保存，确认结果仍在物件上。
场景：点「保存」后该播怎样的动画。一次性反馈会自己停在「已保存 ✓」；切到循环档看装饰动画如何持续运动并用「暂停」停住；勾减动效再保存，确认结果仍在。
系统 prefers-reduced-motion：关 · 跟随系统
一次性模式：点「保存」，动画会自己停在「已保存 ✓」——这是它的结束条件。下一步可切到循环档，对照两种目的。
面板里测到的结论
把刚才物件上的状态变化提炼成判断：目的、结束条件和减动效共同决定一个动画成不成立。
- 先定目的：成功/完成反馈用一次性，装饰氛围才用循环——不要把反馈做成无限运动。
- 一次性动画要有结束条件：播完停在稳定、可读的结果（文字 + 图标），不靠位移独自表达。
- 循环动画必须可暂停/关闭，不能让装饰持续抢走阅读注意力或截获焦点。
- prefers-reduced-motion 跳过运动，但状态、结果文字和操作反馈都要保留，不能让结果消失。
什么时候用动画
出现/离开/完成需要被感知时适合；即时数值或会拖慢阅读的场景别当万能解。
保存成功、删除确认、新内容到来、空状态插画轻微浮动——状态变化或完成需要被感知。
输入校验、悬停态、即时数值变化用动画会显得迟钝；持续闪烁、无法关闭的自动循环装饰会干扰阅读。
怎么从目的走到结果
四步保证动画有目的、能结束、减动效仍可见。
- 定目的这次动画是反馈（一次）还是氛围（循环）？
- 定结束条件一次性停在什么稳定结果？循环提供暂停/关闭控件？
- 结果长在物件上用文字、图标和状态一起表达，不只靠位移或透明度。
- 接减动效prefers-reduced-motion 跳过运动，但结果、状态和焦点路径保留。
正反例：停在结果 vs 无限闪 / 藏结果
同一目标——告诉用户「保存成功了」。差异只在是否停在稳定结果、是否在减动效时仍显示。
保存成功后播放约 1 秒动画，自动停在「已保存 ✓」。重复操作每次都只播一次，不循环不闪烁；开启减动效时瞬切到同一个结果。
差异：有结束条件，结果始终可见。同一反馈用无限闪烁表达成功，持续抢走阅读注意力；或开启减动效时连同「已保存」结果一起隐藏，用户无法确认操作是否生效。
差异：只改一处——把「停在结果」换成「无限闪 / 藏结果」。快速自测
保存成功的动画播完之后，下一步该停在哪里？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。