transition与animation区别详解

本文深入解析了HTML5中transition与animation两大动画机制的本质区别与适用场景：transition专精于简单、明确触发的两状态平滑过渡（如按钮悬停变色），而animation则胜任复杂帧序列、循环播放或需精细时序控制的动效（如loading转圈、弹窗入场）；文章强调二者并非替代关系，而是分工协作，并重点指出——真正影响动画流畅度的不是语法是否正确，而是能否精准选择可硬件加速的属性（如transform和opacity），规避引发重排的left/top/height等“性能杀手”，同时避开display切换、all过渡、auto高度等常见陷阱，帮你从根源上解决卡顿、失效与样式丢失问题。

transition 和 animation 不是替代关系，而是分工不同：transition 适合简单状态切换（比如按钮悬停变色），animation 适合复杂帧序列（比如 loading 转圈、弹窗入场）。选错会导致动画卡顿、无法触发或样式丢失。

什么时候该用 transition？

当你只需要在两个状态之间平滑过渡，且触发条件明确（如 :hover、:focus、JS 切换 class），就用 transition。

• 必须配合属性值变化才生效——比如从 opacity: 0 改为 opacity: 1，但不会响应 display: none → block 这种不可过渡的属性
• 只定义“怎么变”，不定义“变成什么样”；起始/结束状态由 CSS 规则本身决定
• 常用组合：transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) —— 多个属性可分别指定时长和缓动
• 容易踩坑：transition: all 0.3s 看似方便，但会过渡所有可动画属性（包括 height、color 等意外变化），造成性能抖动或逻辑混乱

什么情况下必须用 @keyframes + animation？

需要控制中间帧、循环播放、延迟启动、或独立于 DOM 状态运行时，只能靠 animation。

• @keyframes 里必须用百分比定义关键帧（0%、50%、100%），不能用关键词如 from/to 混用（部分浏览器兼容性差）
• animation 是复合属性，推荐显式写全：animation: spin 1.5s linear infinite，避免漏掉 animation-fill-mode: forwards 导致动画结束后回退到初始状态
• JS 控制暂停/播放要用 animation-play-state，不是 play() 方法（那是 Web Animations API）
• 注意：animation 不会响应 JS 直接改 style.transform，因为内联样式优先级高于 @keyframes 计算值

transform 和 opacity 为什么总被推荐用于动画？

因为它们能触发 GPU 加速，而 left、top、width 等会频繁触发重排（reflow），导致掉帧。

• 想移动元素，用 transform: translateX(10px)，别用 left: 10px
• 想缩放，用 transform: scale(1.2)，而不是 width + height
• opacity 是唯一支持硬件加速的透明度属性；rgba() 背景色或 filter: opacity() 都不行
• 如果必须用 height 动画（比如下拉菜单），先设 overflow: hidden，再用 transition: height 0.25s ease-in-out，但要注意高度为 auto 时 transition 失效——得用 JS 测高或改用 max-height

真正难的不是写对语法，而是判断该用哪个 API、哪些属性能流畅动画、以及如何让动画在低配设备上不卡顿。很多“动画失效”问题，根源其实是用了不可过渡的属性，或者没关掉不必要的重绘触发点。

理论要掌握，实操不能落！以上关于《transition与animation区别详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！