css过渡与动画属性_transition与animation差异与应用

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 更重、更难维护。

Krea AI

多功能的一站式AI图像生成和编辑平台

下载

立即学习“前端免费学习笔记（深入）”；

• @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);
}