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

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