transition适用于明确起点终点的交互反馈，声明属性变化的过渡方式；animation适用于多阶段、循环或自动播放的节奏控制，由时间轴驱动且支持暂停、倒放、循环等能力。
transition 适合响应式状态切换，不是动画控制器
当你需要“鼠标一悬停就变色”“点击后按钮缩放”这类有明确起点和终点的交互反馈时，transition 是更轻、更语义化的选择。它不描述过程，只声明“某个属性变了，用什么方式过渡过去”。
常见翻车点：transition: all 0.3s 一加，所有属性全被拖进过渡队列；鼠标快速进出时，transition 队列堆积、跳帧，甚至触发重排——尤其当 height 或 margin 被卷入时。
- 只对可计算的属性生效：
transform、opacity、color等可以，但display、height: 0 → auto不行 - 必须靠显式变更触发：JS 改
className或直接设style.opacity才会动；class 存在但值没变，不会启动 - 性能敏感场景优先用
transform和opacity，避免改width、left触发重排
animation 适合多阶段、循环或自动播放的节奏控制
要实现“加载图标转三圈后抖一下”“心跳脉冲循环”“页面一打开就淡入”，就得用 @keyframes + animation。它本质是时间轴驱动，和当前状态解耦，不依赖用户动作。
典型误用：用 animation 做 hover 弹出菜单，结果每次移入都重头播放，UI 抽搐；或者忘了加 animation-fill-mode: forwards，动画一结束立刻回退到初始态，视觉断层。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
animation-play-state: paused可暂停，animation-direction: reverse能倒放，animation-iteration-count: infinite支持循环——transition完全没有这些能力 - 动画中修改
transform不会打断当前动画；但改transition-duration会重置整个过渡流程 - IE10+ 支持
@keyframes，但部分老 Android WebView 对cubic-bezier()解析不准，建议用ease、linear等基础函数
混用 transition 和 animation 能分层处理交互细节
真实项目里，两者不是二选一，而是分工协作：用 transition 处理用户操作带来的状态变化（比如菜单展开的高度过渡），用 animation 实现独立节奏的视觉反馈（比如图标旋转 + 发光）。
关键注意点：hover 时同时启用两者，需手动控制 animation-play-state，否则动画会持续运行，与交互脱节。
- 按钮悬停时缩放用
transition: transform 0.3s，背景呼吸灯用animation: pulse 1s infinite alternate - 菜单展开用
transition: height 0.25s ease-in-out，右侧箭头图标叠加animation: rotateIn 0.4s做弹性反馈 - 伪元素可单独跑发光动画，不影响主元素的
transition流程
容易被忽略的底层差异：动画结束后属性是否保留
transition 动画结束之后，元素的 CSS 属性值真的变了——比如 hover 后 transform: scale(1.1) 就留在那里；而 animation 默认只是“模拟变化”，动画一停，元素就回到原始样式（除非加 animation-fill-mode: forwards）。
这个区别直接影响 JS 逻辑：你不能靠 getComputedStyle(el).transform 拿到 animation 过程中的实时值，但可以读到 transition 结束后的最终值。调试时看到动画结束了但样式“消失”，八成是漏了 forwards。
