微交互动画需以css为主、js为辅，通过transition和@keyframes实现轻量、可感知的反馈，严格遵循性能与兼容性规范。
微交互动画不是“加个动画就完事”，而是让按钮、输入框、加载状态这些小元素在用户操作瞬间给出可感知、有节奏、不打断流程的视觉反馈。核心原则是：CSS 负责绝大多数动效，JS 只做状态切换的“开关”。
CSS transition 实现按钮悬停/点击反馈
这是最轻量、最可靠的方式。关键不是写多炫的动画，而是选对触发属性和 timing-function。
-
transition必须写在默认状态（非:hover或:active）里，否则第一次悬停会无过渡 - 别用
transition: all 0.3s—— 它会意外过渡height、display等不可动画属性，导致布局抖动 - 推荐只过渡明确可动画的属性：
transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease -
:active状态要配合transform: scale(0.98)+background-color加深，模拟物理按压感；但注意 iOS Safari 对:active支持不稳定，需加cursor: pointer触发
用 class 切换驱动 CSS @keyframes 动画
当需要循环、多帧、路径运动（如摇晃、打字、加载旋转）时，@keyframes 不可替代，但 JS 绝不能直接操作 style.animation。
- 给元素绑定事件后，用
element.classList.add('is-shaking')触发预设动画类，而不是element.style.animation = 'shake 0.5s' - 动画结束后记得清理：监听
animationend事件移除 class，避免重复触发或状态残留 - 移动端必须同时监听
touchstart和click，但优先用touchstart防 iOS 300ms 延迟；touchstart中调用e.preventDefault()可防止长按唤出菜单干扰 - 如果动画需响应数据状态（如“提交中→成功→失败”），每个状态对应独立 class，CSS 里分别定义
animation和animation-play-state
避免内联 style 操作导致的动画失效
直接改 element.style.transform 或 element.style.opacity 看似简单，但极易破坏已有 transition 或 animation 流程。
- 浏览器会把内联 style 当作最高优先级，覆盖掉 CSS 文件里写的
transition声明，导致“突然跳变” - 例如：
box.style.transform = 'scale(1.2)'会立刻生效，没有过渡；而box.classList.add('is-expanded')才能触发已声明的transition: transform 0.3s - 唯一可接受的内联 style 是初始化时设置 CSS 变量值，比如
box.style.setProperty('--rotate-angle', '45deg')，再由 CSS 的transform: rotate(var(--rotate-angle))驱动过渡 - 表单控件（如
<input>）的:focus状态动画，也必须靠 class +:focus-within实现，不能靠 JS 监听 focus 事件去改 style
移动端 touch 交互与性能陷阱
在手机上，微交互卡顿往往不是因为动画复杂，而是触发时机错位或强制同步重排。
- 不要在
touchmove里直接改transform—— 它会触发 layout，导致掉帧；改用requestAnimationFrame节流，或直接用 CSSwill-change: transform提前告知浏览器 - 滚动触发动画（如“进入视区才淡入”）别用
scroll事件监听，改用IntersectionObserver，它原生异步且性能友好 - 禁用
user-select: none在可点击区域外——它会让部分安卓设备误判为不可交互，导致touchstart不触发 - 所有动画元素建议加
backface-visibility: hidden或transform: translateZ(0)，强制启用 GPU 加速，尤其在低端 Android 设备上效果明显
真正难的不是写出第一个摇晃动画，而是让所有微交互在不同设备、不同网络、不同用户偏好（比如开了 prefers-reduced-motion）下都保持一致的节奏和意图。别忘了加媒体查询兜底：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
