transition适合状态切换而非复杂运动，仅在属性值变化时触发，无起始/结束帧概念，由浏览器自动补间；animation需@keyframes定义关键帧，支持自动播放、循环、暂停及精确时序控制。
transition 适合做“状态切换”而不是“复杂运动”
它只在属性值变化时触发，比如 :hover、class 切换、JS 修改样式等。没有定义“起始帧”和“结束帧”的概念，浏览器自动补间——你只告诉它“从 A 变到 B”，它决定怎么变。
常见错误是把它当动画用：写一堆 transition: all 0.3s，结果鼠标一划过，所有属性（包括 width、opacity、transform）全动，卡顿还不可控。
- 只对可动画的 CSS 属性生效（如
color、transform、opacity，但不包括display、height（除非是具体数值）） - 必须有明确的“触发时机”，没有“自动播放”或“循环”能力
- 不能控制中间过程（比如 30% 处停顿、反向加速），只能靠
timing-function调整缓动曲线 - 多个属性过渡要分开写，否则容易覆盖：
transition: opacity 0.2s, transform 0.3s ease-out
animation 需要 @keyframes + 名称绑定，才能真正“编排动作”
@keyframes 是声明式动画蓝图，animation 属性是调用它的开关。它不依赖状态变化，可以自动播放、循环、暂停、反向、填充首尾帧——这些 transition 做不到。
典型误用是用 animation 实现一个简单的悬停缩放，反而比 transition 更重、更难维护。
立即学习“前端免费学习笔记（深入）”；
-
@keyframes中必须用百分比（0%、50%、100%）或关键词（from/to），不能写 JS 变量或表达式 -
animation-fill-mode: forwards很关键——否则动画结束后元素会“弹回”初始状态 - 多个动画叠加时，后声明的
animation会覆盖前面的，要用逗号分隔：animation: slide 0.4s, fade 0.2s 0.1s - 性能敏感场景优先用
transform和opacity，避免触发布局（width、left）或绘制（background-color）
transition-delay 和 animation-delay 的行为差异
transition-delay 是“等多久才开始过渡”，但它只在触发条件满足后计时；而 animation-delay 是“动画定义后立即开始倒计时”，哪怕元素还没插入 DOM 或没显示（display: none）也会悄悄计时——这点常被忽略。
- 如果元素一开始
display: none，之后切为block，transition-delay不会累积，而是从可见那一刻重新算 -
animation-delay在元素进入样式计算阶段就启动，哪怕它被visibility: hidden或opacity: 0遮住，延迟照样走完 - 想让动画“等元素完全就位再播”，别只靠
animation-delay，配合animation-play-state: paused+ JS 控制更可靠
何时选 transition，何时必须用 animation
核心判断标准不是“哪个高级”，而是“有没有中间状态、是否需要精确控制时序”。很多 UI 交互（按钮按压、菜单展开、卡片翻转）用 transition 更轻量、更语义清晰；而加载指示器、品牌动效、页面入场序列这类必须自定义多帧节奏的，绕不开 animation。
- 按钮 hover 缩放 + 变色 →
transition（两态之间，无中间逻辑） - 下拉菜单展开时先 scaleY(0)→1，再 opacity 从 0→1 →
animation（需错开两段时序，transition无法独立控制） - 无限旋转的 loading 图标 → 必须
animation（infinite+linear，transition无法循环） - 点击后元素“弹跳入场”（先下移再回弹）→
@keyframes写 0%→70%→100%，transition做不到这种非线性路径
@keyframes bounce-in {
0% { transform: scale(0.3) translateY(50px); opacity: 0; }
70% { transform: scale(1.1) translateY(-10px); }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
.element {
animation: bounce-in 0.6s cubic-bezier(0.28, 0.84, 0.42, 1);
}
过渡和动画不是互斥选项，而是不同抽象层级的工具。真正容易出问题的，是把 animation 当成“更炫的 transition”来滥用，或者在该用 @keyframes 描述复杂路径时，硬生生拆成多个 transition 链式触发——后者不仅难维护，还极易因时机错乱导致视觉跳跃。 
