用途
feedback-indicators 是 dylantarre/animation-principles 技能集中的一个条目，用于指导“操作确认类”动画的设计与实现。它涵盖的场景包括：成功打勾、错误警告、表单验证、保存确认，以及任何用于回应用户操作、告知操作结果的动画。其核心思路是把迪士尼的 12 条动画原则映射到界面反馈动效上，让反馈更清晰、更具表现力。
主要能力：12 原则在反馈动画中的应用
资料逐一说明了各原则的落地方式：
- Squash & Stretch（挤压与拉伸）：成功打勾可以带过冲地缩放，绘制时压缩、完成时展开。
- Anticipation（预备动作）：反馈出现前有约 50ms 的短暂准备。
- Staging（舞台化）：反馈出现在操作发生的位置——按钮上显示勾选，字段上显示验证结果。
- Straight Ahead vs Pose-to-Pose：定义反馈状态：中性 → 处理中 → 成功/错误。
- Follow Through & Overlapping（跟随与重叠）：图标先动，标签随后出现；确认元素可以错峰呈现。
- Slow In/Slow Out（慢入慢出）：成功使用 ease-out（自信地到达），错误使用 ease-in-out（抖动后归于稳定）。
- Arcs（弧线）：勾选沿弧线绘制而非直线；错误叉号自然交叉。
- Secondary Action（次要动作）：勾选绘制 + 颜色变化 + 缩放弹跳，组合出更丰富的反馈。
- Exaggeration（夸张）：成功值得庆祝——缩放过冲到 1.2、使用醒目颜色、动作自信。
- Solid Drawing（扎实绘图）：反馈图标必须一眼可辨，识别时间在 100ms 以内。
- Appeal（吸引力）：正向反馈应令人愉悦，负向反馈坚定但不具惩罚感。
使用方式与实现模式
资料给出了推荐的时长与缓动参数，例如：行内验证 150ms、ease-out、不自动消失；勾选绘制 400ms、ease-out、约 3000ms 后自动消失；成功提示 300ms、ease-out、约 4000ms 后消失；错误抖动 400ms、ease-in-out、不自动消失；错误提示 300ms、ease-out、约 6000ms 后消失；保存指示 200ms、ease-out、约 2000ms 后消失。
代码层面提供了若干实现模式：
- 勾选绘制：使用 stroke-dasharray 与 stroke-dashoffset 配合 draw-check 关键帧。
- 成功缩放：使用 cubic-bezier(0.34, 1.56, 0.64, 1)，从 scale(0) 经 1.2 过冲回到 1。
- 错误抖动：在 X 轴上左右位移，关键帧结束回到原位。
- 行内验证：valid-pop 从 0.8 缩放到 1。
- SVG 勾选模式：圆形背景加路径，路径使用 stroke-width 与白色描边。
- 自动消失模式：添加类名显示，setTimeout 后移除并切换到隐藏类。
适用场景
适合在表单、按钮、保存操作、数据提交等交互点中设计即时反馈动效，尤其关注反馈出现的位置、时机与节奏是否符合用户预期。
关键规则与限制
资料明确规定：反馈必须在操作后 100ms 内出现；成功状态短暂庆祝、不宜久留；错误状态持续到用户确认；图标旁始终提供文字以保障无障碍；在 prefers-reduced-motion 下改为即时状态、不使用动画。
以上为资料中提供的全部事实信息，未提及的收费、平台或版本细节暂未提供。