用途
微交互（Micro-Interactions）是一种界面动效设计技能，用于设计和实现短暂、有目的的小型动画。资料指出，微交互是一段时长约200–600毫秒的瞬间，例如勾选框绘制对勾、点赞时的心跳脉动、开关带一点过冲地缓入到位、完成目标时的小彩纸爆发。这些瞬间虽短，但能传达产品是由用心的人制作的。
什么是好的微交互
资料提出，微交互在满足以下条件时才值得存在：
- 确认一个操作——让点击、轻触或输入的结果变得清晰无疑
- 奖励一个里程碑——庆祝用户努力达成的事情
- 揭示某些信息——以有助于理解的方式展开信息
- 增加质感——让原本平淡的瞬间变得有物理感、真实感
它在以下情况下会失败：延迟用户（动画阻塞下一步操作）、重复过于频繁（变成噪音而非信号）、仅为装饰而存在（没有传达任何信息）。
以自然世界为参照
资料将自然行为与 UI 对应关系列出：
- 门摆动至停止 —— 开关略微过冲后稳定
- 水滴滴落 —— 列表项错落显现
- 橡皮筋回弹 —— 下拉刷新回弹
- 树叶飘落 —— 关闭时轻柔淡出并向下漂移
- 铃响 —— 图标在触发时短暂振荡（抖动）
- 印章压纸 —— 内部元素位移（如图标轻推）但不改变按钮边界
运动应感觉是必然的，仿佛元素具有物理属性，不可能以其他方式表现。
主要模式
动画图标：在触发时动画的图标比静态替换更能生动传达状态变化。包括：完成时从起点到终点自绘的对勾（使用 stroke-dashoffset 关键帧）；点赞时的心跳脉动（先略微放大再回落）；汉堡菜单→关闭的变形（线条动画组成×，菜单打开时）；通知时的铃铛抖动（短暂振荡旋转）；加载旋转器（使用缓动而非线性旋转——弹簧旋转感觉有生命，线性感觉机械）。
开关/切换：开关应感觉像物理开关，而非状态变化。使用带过冲的 cubic-bezier（0.34, 1.56, 0.64, 1）产生弹簧效果，拇指滑动并轻微弹跳后稳定。这是廉价开关与高级开关的区别。
成功/完成：标记真正完成的时刻——表单提交、引导步骤完成、目标达成。包括：自绘的对勾动画；高价值里程碑（首次购买、账户创建、目标达成）的少量彩纸，需克制使用，绝不用于日常操作；进度条完成时的绿色填充过渡；统计数字达到最终值时的数字滚动。
揭示与展开：手风琴、提示框和弹出框通过小幅度揭示打开，比瞬间出现更显考究。使用 max-height 过渡配合 ease-out，内容像被重力拉到位一样向下滑动，而非闪烁出现。
按钮交互反馈（稳定性规则）
按钮在悬停、聚焦或点击时绝不能改变外部尺寸或移动在布局中的位置。反馈通过颜色、内部阴影或内部元素的微小动画（如箭头向右移动 2px）来传达，这些都不影响按钮的占位。资料提供了 CSS 示例：使用 transition 过渡 background-color 和 box-shadow；悬停时改变颜色；激活时使用更深的对比色和 inset 内阴影暗示深度，而不缩放。
骨架屏→内容过渡
内容加载时不要闪烁出现，应在 150–200ms 内淡入覆盖骨架屏。骨架屏溶解，内容到来（使用 fade-in 关键帧）。
引导注意远处变化
用户常错过远离当前焦点或点击区域的变化（变化盲视）。若用户当前未注视的区域发生变化，应使用细微动画引导视线。方法包括：通知徽章绽放（新通知到达时，徽章短暂放大到 1.2 再回到 1.0）；背景高亮淡出（列表项更新或新增行时，用品牌色淡染背景并在 1–2 秒内淡出至透明）；细微抖动（2–4px 的水平抖动可引导注意侧边栏或工具栏项，而不过于激进）。规则：动画必须是非循环的，一旦抓住视线就必须停止，避免成为永久干扰。
组件稳定性的神圣规则
交互元素，尤其是按钮，必须布局稳定。禁止缩放：绝不在悬停或点击按钮时使用 transform: scale()，它会导致视觉抖动，感觉"软塌"而非高级。禁止移位：绝不使用 translate 或会改变元素相对于邻居位置的 margin。原因：布局稳定性创造专业工程感和"坚固感"；如果 UI 在光标下移动，会感觉不可预测。
如何声明动效
状态用 transition，序列用 keyframes。CSS transition 可以被中断：悬停中途移开光标，元素会从当前位置折返。keyframe 动画不能——它会播放到底然后跳变。每个 hover、focus、active 和 selected 状态都是 transition。将 @keyframes 保留给分阶段入场或自行运行的循环。
命名属性。transition: all 会动画任何恰好变化的东西，包括强制浏览器每帧重排页面的布局属性——这也是组件在无关 class 落到它身上时开始滑动的原因。资料建议明确写出 transition-property（如 opacity, scale）、transition-duration 和 transition-timing-function。
will-change 是最后手段。仅在你亲眼看到首帧卡顿时添加，仅用于 transform、opacity 或 filter，并在动画结束后移除。它会预留合成器层；广泛使用会耗费比节省更多内存。
克制
微交互是调味料，不是主菜。每个触发只播放一次——对勾在保存时动画一次，不是每次渲染都动画；重复操作跳过——批量删除 50 项不应动画 50 次；无阻塞动画——用户必须能立即继续，动画与结果并行运行，而非替代结果；始终尊重 prefers-reduced-motion，资料给出了对应的媒体查询示例，将动画和过渡时长设为 0.01ms。对每个交互都应自问：这使结果更清晰，还是只是视觉上更繁忙？若是后者，就移除它。
审查清单
资料提供了一份审查清单，包括：按钮和交互元素在悬停和点击时是否保持完全稳定（无尺寸变化、无移位）；每个微交互是否确认操作、奖励里程碑或帮助理解；时长是否在 200–600ms；运动是否参照自然物理（弹簧、ease-out、过冲）而非线性计时；动画是否非阻塞；是否尊重 prefers-reduced-motion；高耗费庆祝（彩纸、绽放效果）是否留给真正的里程碑；动画图标是否清晰传达其代表的状态变化；开关是否使用弹簧缓动曲线而非线性；远处变化（焦点区域外）是否用短暂、非循环的动画高亮以引导视线。
限制
资料未提供该技能的具体安装方式、平台支持、收费或价格信息。