CSS如何制作一个具有层叠感的卡片切入动效_利用延迟动画控制z-index

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