transition更适合颜色变化、尺寸过渡、位置微调、透明度切换及阴影边框等装饰性属性渐变；需精准声明属性而非all，注意简写顺序，利用class切换实现状态驱动动效，并排查值类型、初始值及will-change等导致的失效问题。
如果CSS动画效果太复杂、难维护，用 transition 替代部分简单动画确实是更务实的选择。它语义清晰、代码量少、易调试，特别适合状态切换类动效（比如悬停、点击、展开收起）。
哪些动画适合用 transition 替代？
不是所有动画都适合换，但以下几类用 transition 更轻量、更可控：
- 颜色变化（如按钮 hover 变色、主题切换）
- 尺寸过渡（如菜单展开/收缩、卡片缩放）
- 位置微调（如图标轻微上浮、下划线滑入）
- 透明度与可见性切换（如淡入淡出提示框）
- 阴影、边框等装饰性属性的渐变变化
transition 的写法要“精准”
避免写 transition: all 0.3s ease —— 它会让所有属性都动，容易引发意外行为（比如无意中触发 layout 或重绘）。推荐按需声明：
- 只写真正要过渡的属性：
transition: background-color 0.2s, transform 0.25s, opacity 0.15s - 用简写时注意顺序：property duration timing-function delay（缺省值会覆盖）
- 需要“进出场不同速”？可分别在初始态和目标态设置不同的 transition（例如入场用 ease-in，离场用 ease-out）
配合 class 切换，逻辑更清晰
比起 keyframes + animation-name 控制播放，transition 天然适配 class 增删，状态即动效：
立即学习“前端免费学习笔记（深入）”；
- HTML 中只需
- CSS 写基础态和交互态：
.btn { background: #007bff; transition: background-color 0.2s; }
.btn:hover { background-color: #0056b3; } - JS 控制也简单：
el.classList.toggle('active')，样式自动响应
过渡失效？先检查这几个点
transition 不生效很常见，多数是细节没对齐：
- 起始态和结束态的属性值类型必须可插值（比如
display: none → block不行，改用opacity+visibility） - 确保元素有初始值（比如想过渡
transform，但没设transform: translateX(0)，浏览器可能取默认 none，导致过渡不触发） - 父元素或自身设置了
will-change: transform或contain: paint，有时会干扰过渡时机，临时移除测试 - 用 Chrome DevTools 的 “Animations” 面板可直接预览、暂停、调整 transition 时间轴
