z-index 无法直接动画，因其是离散整数属性，浏览器不支持插值；需用 transform（如 translateZ、scale、translateY）配合 z-index 阶跃切换实现视觉层叠动画。
z-index 动画为什么直接加 transition 没反应
因为 z-index 是一个离散的整数属性，不是连续可插值的（比如 opacity 或 transform），浏览器无法在两帧之间“渐变”出中间的 z-index 值。所以对 z-index 本身写 transition: z-index 0.3s 完全无效——你不会看到层叠顺序平滑切换，只会看到瞬间跳变。
真正能动画的层叠方案：用 transform + z-index 组合
要让“谁在上、谁在下”的视觉变化看起来是动画，得把 z-index 当作开关，靠 transform: translateZ() 或 transform: scale() 配合视差/遮挡制造“前后感”，再用 transition 控制这些可动画属性。常见实操路径：
- 给元素设
position: relative或absolute，并统一父容器transform-style: preserve-3d（启用 3D 渲染上下文） - 用
transform: translateZ(1px)和translateZ(-1px)制造深度差异，配合transition: transform 0.25s -
z-index只在关键帧里做阶跃式切换（比如 hover 时设z-index: 10），不参与过渡，仅确保最终层叠顺序正确 - 若需纯 2D 效果（如卡片翻转），改用
transform: scale(1.02)+z-index提升，缩放会触发重绘且可过渡
transition 触发时机容易被忽略的坑
即使你写了 transition: transform 0.3s, z-index 0.3s，z-index 部分依然无效；但更隐蔽的问题是：transform 动画是否真正触发，取决于元素是否处于“渲染层合成”状态。常见失效场景：
- 父元素有
overflow: hidden且子元素transform超出边界 → 动画卡顿或截断 - 没加
will-change: transform，尤其在低性能设备上，首帧延迟明显 - 使用
top/left位移 +transition替代transform→ 触发 layout，掉帧严重 -
z-index生效前提是元素必须是定位元素（position: relative/absolute/fixed/sticky），否则设了也无效
一个轻量可用的卡片层叠动画示例
下面这段代码实现了鼠标悬停时“浮起+前置”的效果，视觉上有层叠动画感，且兼容性好：
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.4, 1);
z-index: 1;
}
.card:hover {
transform: translateY(-4px) scale(1.01);
z-index: 10;
}
注意：z-index: 10 在 hover 时才生效，它不参与过渡，只保证悬停态绝对前置；真正的动画全由 transform 承担。如果多个卡片堆叠，只需确保它们共用同一个定位上下文（比如父容器 position: relative），z-index 的相对关系就能稳定生效。
复杂点在于：当需要精确控制多层深度（比如 3 层以上轮播式叠放），就得放弃纯 CSS，用 JS 动态更新 z-index 并配合 transform 微调，否则视觉秩序容易混乱。
