transition 和 animation 分工不同：transition 适用于两状态间平滑过渡（如 hover 变色），需属性值变化且触发条件明确；animation 适用于复杂帧序列（如 loading 转圈）、需控制中间帧、循环或延迟时，必须用 @keyframes 定义关键帧；推荐使用 transform 和 opacity 实现 GPU 加速，避免 left、top、height 等引发重排。
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、哪些属性能流畅动画、以及如何让动画在低配设备上不卡顿。很多“动画失效”问题，根源其实是用了不可过渡的属性，或者没关掉不必要的重绘触发点。
