transition无法生效的属性（如display、position）因不可插值或触发重排而失效；@keyframes通过逐帧重绘“模拟”过渡，但需规避display直接切换，改用opacity/visibility+height/max-height组合，并在animationend中由JS设置display。
transition 无法生效的属性，为什么关键帧能“骗过”浏览器
因为 transition 只对可计算、可插值的属性起作用，像 display、z-index、position（从 static 切到 absolute）这些要么是离散值，要么触发重排后无法线性过渡。而 @keyframes 是强制重绘周期，浏览器会在每一帧执行样式快照，相当于用时间切片“模拟”过渡——哪怕底层不支持过渡，也能靠逐帧改写实现视觉连续性。
用 @keyframes 模拟 display 切换的常见错误
直接在关键帧里写 display: none → display: block 不会动，因为 display 不参与动画插值。必须绕开它：
- 用
opacity+visibility控制显隐，再用height或max-height配合overflow: hidden做收放 - 把
display的切换挪到动画结束后的animationend事件里：先动画缩放/透明度，再 JS 设置display: none - 避免在关键帧中写
display: initial这类不确定值，不同 UA 表现不一致
示例：
@keyframes fadeOut {
0% { opacity: 1; visibility: visible; }
99% { opacity: 0; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}注意 99% 和 100% 分开写，否则 visibility: hidden 会立即生效，动画卡住。
position 类型切换（如 static ↔ fixed）怎么平滑过渡
浏览器不支持 position 属性本身过渡，但可以过渡它的“副作用”——比如 top/left 值，前提是元素已处于目标定位上下文中。
- 先用 JS 把元素临时设为
position: fixed，并手动计算当前top/left（基于视口或滚动偏移） - 再用关键帧过渡
top和left到目标位置，最后保持position: fixed - 反向操作时，不能直接切回
static，得先动画还原top/left到auto（用transform模拟更稳） - 慎用
transform: translate()替代top/left，它不触发重排，性能好，但要注意层级和z-index是否仍生效
关键帧重置的性能陷阱和兼容性提醒
用关键帧“伪造”过渡看似灵活，但容易掉进两个坑：
立即学习“前端免费学习笔记（深入）”；
- 动画期间频繁读写布局（如在
animation中用 JS 获取offsetTop）会强制同步重排，卡顿明显 -
will-change: transform要提前加在动画元素上，否则 iOS Safari 可能跳帧 - IE10+ 支持
@keyframes，但不支持animation-fill-mode: forwards在某些场景下保留终态，得靠 JS 补位 - 如果只是想隐藏元素，别硬套关键帧——
visibility+opacity+transition更轻量；关键帧适合需要精确控制中间态（比如弹性弹出、错位入场）的场景
真正难的不是写几行 @keyframes，而是判断哪一步该交给 CSS 动画，哪一步必须由 JS 拦截时机、补足逻辑。过渡失效的地方，往往藏着 DOM 状态和样式系统之间没对齐的缝隙。
