transition适合鼠标悬停变色、按钮点击缩放、菜单展开收起等有明确起点和终点的状态切换场景，它轻量、稳定、易维护；animation则必须用于循环、多阶段、自动播放或需暂停/反向控制的动画。
transition 适合什么场景
鼠标悬停变色、按钮点击缩放、菜单展开收起这类有明确起点和终点的交互，直接用 transition 就够了——它轻、稳、易维护。
常见错误是写了 transition: all 0.3s 却没效果，根本原因是：
- 没写触发源（比如漏掉
:hover或没切换 class） - 起始或结束状态里某个属性值缺失（比如默认态没设
transform: scale(1)，hover 态却写了scale(1.1)） - 改了不支持过渡的属性（如
display、height: auto、left）
性能上优先用 transform 和 opacity，避免触发布局重排；多个属性要分开写，别全塞进 all 里，否则容易意外过渡 box-shadow 或 font-size。
animation 必须用在哪些地方
需要循环、暂停、反向播放、或多阶段控制（比如 loading spinner 转三圈后抖一下），必须用 @keyframes + animation。
典型翻车点：
- 忘了加
animation-fill-mode: forwards，动画一结束就“弹回”初始样式 - 用
:hover触发animation，鼠标进出反复重播，体验像抽搐 -
@keyframes定义不全（只写了to没写from，或漏掉0%），结果动画不动
动画中修改 transform 不会打断当前播放，但改 transition 相关属性（比如 transition-duration）会重置整个过渡流程。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
同属性同时存在时谁生效
animation 会覆盖 transition 的同名属性变化。比如元素同时有 transform 的 transition 和 animation，那动画期间 transition 对 transform 就不起作用。
这不是 bug，是规范行为。实际项目中常让 animation 负责自主循环部分（如图标旋转），再用 transition 处理用户交互引发的状态衔接（如卡片 hover 时加阴影）。
二者可共存，但别指望它们叠加生效——浏览器只认最终计算值，不会把两个动画“合成”起来。
JS 控制动效时该选哪个
别在 JS 里反复写 el.style.transition = 'opacity 0.2s' 再改 el.style.opacity，极易冲突、不触发、或因渲染时机问题失效。
更稳的做法：
- 用 class 切换驱动
transition（el.classList.add('is-active')） - 复杂控制用
element.animate()（Web Animations API），它能动态调整时间、暂停、设置进度 - 需要拖拽中实时更新动画位置，
element.animate()比硬切 class 更合适
真正难的不是选 transition 还是 animation，而是判断这个动效到底要不要“脱离用户操作独立运行”——要，就上 animation；只是响应一次点击或悬停，transition 几乎总是更干净的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
