z-index 不支持 CSS 过渡，层叠感需靠 transform + opacity + animation-delay 等视觉错觉实现；必须手动设置 z-index 顺序并配合 perspective/preserve-3d（或降级方案），且 z-index 需在动画前同步生效。
卡片切入动效里，z-index 不能靠动画直接过渡
CSS 的 z-index 本身不支持过渡（transition）或动画（animation），设成 z-index: 1 → z-index: 5 不会“渐进提升层级”，只会瞬间切换。所谓“层叠感”，其实是靠视觉错觉：用 transform: translateZ() 或 transform: scale() + 透明度 + 延迟动画，让卡片看起来有前后纵深，再配合 z-index 的手动分层控制顺序。
用 transform 模拟深度，配合 animation-delay 控制切入节奏
真实层叠感来自三维位移和视觉权重变化，不是单纯调 z-index。推荐组合：transform: translateY() + transform: scale(0.95) + opacity + filter: blur(1px)，再用 animation-delay 错开每张卡片的触发时机。
-
transform: translateZ()在非perspective容器里无效，必须给父容器加perspective: 1000px - 卡片自身加
transform-style: preserve-3d才能正确渲染 Z 轴位移 - 延迟不能只靠
animation-delay，还要配合z-index手动设值（比如按顺序设为10、20、30），否则后入场的卡片可能被先入场的盖住 - 示例关键片段：
card:nth-child(1) { animation-delay: 0s; z-index: 10; } card:nth-child(2) { animation-delay: 0.15s; z-index: 20; } card:nth-child(3) { animation-delay: 0.3s; z-index: 30; }
IE 和旧版 Safari 对 transform 层叠的支持很脆弱
IE11 完全不支持 transform-style: preserve-3d，Safari 13.1 之前对 translateZ() 渲染有偏移 bug。如果要兼容，得降级方案：
- 放弃
translateZ，改用scale(0.98)+opacity: 0.85+ 微小box-shadow模拟远近 -
z-index必须写死，不能依赖 JS 动态计算顺序；否则在 Safari 中卡片可能闪动或顺序错乱 - 避免在动画中同时修改
top/left和transform，会触发重排，卡顿明显
用 JS 控制动画触发时，z-index 更新时机比想象中敏感
如果卡片是 JS 动态插入或批量显示（比如列表展开），z-index 必须在元素插入 DOM 后、动画开始前就设置好。浏览器不会等动画帧再应用样式。
立即学习“前端免费学习笔记（深入）”；
- 不要这样：
el.style.animation = 'slideIn 0.4s'; el.style.zIndex = i;
—— 可能因渲染队列导致顺序错乱 - 应该这样：
el.style.zIndex = i; el.classList.add('animate');，且.animate类里只含animation声明 - 更稳妥的做法：用
requestAnimationFrame包一层z-index设置，确保在下一帧样式生效
z-index 生效时刻、transform 开始变化时刻、视觉权重（opacity/scale/shadow）变化节奏。差 20ms 就容易显得生硬或打架。 
