做 100–200ms 微交互时，用这些时长、缓动和…

适用于需要在 100–200ms 内完成、快速但可感知的微交互，如 tooltip、dropdown、图标状态、hover、徽章、标签页和手风琴等。

适用场景

解决思路

1. 将微交互时长控制在 100–200ms：快到感觉响应迅速，慢到能被感知为有意运动。
2. Squash & Stretch：轻量应用 5–10%，用于有弹性的按钮和出现元素。
3. Anticipation：可做微预备动作，在 150ms 主动作前加 20–30ms 蓄力。
4. Staging：保持单一焦点，只让一个元素移动，其余元素静止。
5. Straight Ahead/Pose to Pose：两种方式都可用，简单动画可逐帧推进，需要控制时用姿势到姿势。
6. Follow Through：最小过冲，超过目标 2–5%，然后快速稳定。
7. Slow In/Slow Out：以 `ease-out` 为主，元素应自信到达。
8. Arcs：可使用轻微曲线，例如下拉项可略微弧形运动，而不是完全直线向下。
9. Secondary Action：最多一个次要动作，例如菜单打开时图标旋转。
10. Timing：60fps 下使用 6–12 帧，足够形成平滑运动。
11. Exaggeration：适度夸张，缩放 0.9–1.1，旋转最多 30 度。
12. Solid Drawing：使用简单变换——scale、opacity、短距离位移。
13. Appeal：快速动画会显得现代、精致。
14. 缓动：标准微交互使用 `transition: all 150ms ease-out;`。
15. 出现元素：先快后柔，使用 `transition: opacity 120ms ease-out, transform 150ms ease-out;`。
16. 弹性微反馈：使用 `transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);`。
17. 最佳用例：tooltip 出现、dropdown 菜单打开、图标状态变化、小型 hover 动画、通知徽章、标签页切换、手风琴标题。
18. 实现 tooltip：`.tooltip { opacity: 0; transform: translateY(-4px) scale(0.95); transition: opacity 120ms ease-out, transform 150ms ease-out; } .trigger:hover .tooltip { opacity: 1; transform: translateY(0) scale(1); }`。
19. 实现 dropdown item：`.dropdown-item { opacity: 0; transform: translateY(-8px); transition: all 150ms ease-out; }`。
20. Key Insight：微动画更多是被感受到而不是被观看；用户会注意到缺失，但不会刻意观察，这是精致感所在。

适用边界 · 注意事项

• 长距离移动不适用。
• 复杂编排、重物理模拟不适用。
• 多阶段揭示、复杂预备序列不适用。