css动画本身不触发交互，真正提升体验的是在用户操作时用@keyframes配合transition或animation做有节制的视觉反馈；hover场景优先用transition实现轻量可控的起止状态变化，避免重排，关键属性用transform和opacity；复杂动效才用animation，须设prefers-reduced-motion降级并控制时长在150–250ms。
直接说结论：CSS 动画本身不触发交互，真正提升体验的是「在用户操作（如 hover、focus、:active）时，用 @keyframes 配合 transition 或 animation 做有节制的视觉反馈」。盲目堆动画反而损害可用性。
hover 时用 transition 比 animation 更合适
大多数按钮、卡片悬停反馈不需要复杂帧序列，transition 更轻量、更可控，且天然支持反向过渡（鼠标移出时自动退回）。
-
transition只需定义起始/结束状态，浏览器自动补间；animation必须写@keyframes，且默认不响应状态回退 - 别对
width/height做transition——会触发重排；优先用transform和opacity - 典型写法：
button { transition: transform 0.2s ease, opacity 0.15s ease; } button:hover { transform: translateY(-2px); opacity: 0.95; }
需要循环或复杂路径时才用 @keyframes + animation
比如加载指示器、状态徽标脉冲、图标微动效等无法用两个状态描述的场景。
- 避免
animation-iteration-count: infinite用在非装饰性元素上——干扰阅读、影响屏幕阅读器 - 务必加
animation-timing-function，默认的ease在中段太慢；常用cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 回弹） - 示例（轻微浮动）：
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0px); } } .icon { animation: float 3s ease-in-out infinite; }
必须设 prefers-reduced-motion 降级
约 1–5% 用户开启系统减少动画，硬编码动画会直接违背可访问性要求（WCAG 2.3.3）。
立即学习“前端免费学习笔记（深入）”；
- 全局关闭所有非必要动画：
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } - 更优做法是只关装饰性动画，保留功能反馈（如按钮按下的
scale） - 别用 JS 检测 —— CSS 媒体查询原生支持，更可靠
最常被忽略的一点：动画时长不是越短越好。低于 100ms 人眼难感知变化，高于 300ms 易觉延迟。按钮反馈控制在 150–250ms，加载类动画可稍长但需有明确终点。
