如何通过CSS实现卡片层叠动画效果，并使用延迟动画调整z-index层级？

本文共计765个文字，预计阅读时间需要4分钟。

CSS 的 `z-index` 本身不支持过渡（transition）或动画（animation）。设置 `z-index: 1` 到 `z-index: 5` 不会渐进提升层级，只会瞬间切换。所谓层叠感，实际上是视觉错觉：

用 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 就容易显得生硬或打架。