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 时间轴