需要让动画建立用户信任与可靠感时：用克制、一致…

适用于金融交易、支付、表单提交、认证流程、设置与配置、进度指示、确认对话框和企业应用等需要传达可信赖感的界面动画。

适用场景

解决思路

1. Squash & Stretch：拉伸形变最大控制在 5–10%；保持受控形变，让元素显得稳固、有重量，不要橡胶感。
2. Anticipation：加入细微但存在的预备动作，持续 50–100ms；用短暂准备提示接下来发生什么，避免意外。
3. Staging：一次只呈现一个动作；清晰、无歧义地展示，让重要元素明显，不隐藏或制造混乱运动。
4. Straight Ahead Action：建立信任时避免逐帧直画；优先使用 pose-to-pose 获得可预测、受控的结果；每一帧都要有意图。
5. Follow Through & Overlapping Action：追随动作要克制；元素快速稳定下来，不要过度弹跳；以专业、可控的方式完成运动。
6. Slow In & Slow Out：使用平滑、对称的缓动；用 `ease-in-out` 创造可预测、专业的运动；不要突然加速或生硬停止。
7. Arc：使用轻柔、可预测的曲线；相似交互保持一致的弧线模式；避免不稳定或意外的路径。
8. Secondary Action：次要动作最小且有目的；支持性动画应强化而非分散注意力；加载指示器应平静稳定。
9. Timing：使用适中、一致的时长（250–400ms）；不要太快（显得仓促）也不要太慢（显得卡住或损坏）；相同元素始终以相同速度动画。
10. Exaggeration：夸张程度非常小（5–10%）；接近真实的运动显得专业可信；用细微修饰代替戏剧化效果。
11. Solid Drawing：保持完美比例；不要扭曲或变形；元素应显得稳定且结构良好。
12. Appeal：设计干净、平衡；对称传达稳定；采用专业美学而非玩趣魅力。
13. Transitions：时长 250–350ms，缓动 `ease-in-out`。
14. Feedback：时长 150–200ms，缓动 `ease-out`。
15. Loading：连续动画，缓动 `linear`。
16. Modals：时长 200–300ms，缓动 `ease-out`。
17. 定义 CSS 变量 `--trust-smooth: cubic-bezier(0.4, 0, 0.2, 1);`。
18. 定义 CSS 变量 `--trust-enter: cubic-bezier(0, 0, 0.2, 1);`。
19. 定义 CSS 变量 `--trust-exit: cubic-bezier(0.4, 0, 1, 1);`。
20. 相同动作必须始终使用相同动画。
21. 时长偏差最大 ±50ms。
22. 不要使用随机或可变时长。
23. 尊重系统运动偏好。
24. 动画被禁用时做优雅降级。