通过CSS animation与z-index结合，可实现卡片翻页、图层浮现等具有层次感的动画效果。关键在于为定位元素设置z-index以控制堆叠顺序，并在@keyframes中分阶段改变z-index值，实现元素层级切换。例如两卡片交替上浮动画中，通过设定不同animation-delay和在关键帧中切换z-index（如1到10），使元素轮流置顶。为提升视觉流畅性，应配合transform（缩放、位移）和opacity过渡，避免突兀变化。需注意z-index仅对已定位元素生效，且其变化不支持缓动，适合“开关式”切换；同时避免滥用高数值导致层级混乱，并关注父元素堆叠上下文影响。结合硬件加速（如translateZ(0)）可优化移动端性能。合理运用此技术能增强界面深度与交互感。
使用CSS animation 与 z-index 结合，可以实现具有层次感的层叠动画效果，比如卡片翻页、图层交错浮现、背景渐变切换等。关键在于控制元素在动画过程中的堆叠顺序，让视觉动效更自然、有深度。
理解 z-index 与定位的关系
z-index 只对已定位元素（position: relative, absolute, fixed, sticky）起作用。要让动画中元素正确分层，必须先设置 position 属性。
- 默认情况下，元素按文档流堆叠，后出现的元素在上层
- 设置 z-index 后，数值越大，层级越高
- 动画过程中动态改变 z-index，可实现“某元素突然浮出”的效果
在 animation 中控制 z-index 变化
CSS 动画不能直接在 @keyframes 中对 z-index 做过渡或渐变动效（因为它是整数，不支持插值），但可以在关键帧中设定不同时间点的 z-index 值，实现分阶段层级切换。
示例：两个重叠卡片交替上浮
立即学习“前端免费学习笔记（深入）”；
<font style="font-family:Monaco,Menlo,'Courier New',monospace; font-size:14px; background:#f5f5f5; padding:10px; display:block">
.card {
position: absolute;
width: 200px;
height: 120px;
border-radius: 12px;
animation: layerSwap 4s infinite;
}
.card:nth-child(1) {
background: #ff5252;
z-index: 1;
animation-delay: 0s;
}
.card:nth-child(2) {
background: #4caf50;
z-index: 2;
animation-delay: -2s;
}
@keyframes layerSwap {
0%, 40% {
z-index: 1;
}
50%, 90% {
z-index: 10;
}
}
</font>
在这个例子中，两张卡片轮流在 50% 时刻提升 z-index 到 10，从而“浮”到上方，形成交替层叠的动画效果。
结合 transform 与 opacity 实现流畅视觉
单独使用 z-index 切换会显得突兀，建议配合 transform（如位移、缩放）和 opacity 实现更自然的过渡。
例如：模拟页面翻转时，当前页提升层级并放大
<font style="font-family:Monaco,Menlo,'Courier New',monospace; font-size:14px; background:#f5f5f5; padding:10px; display:block">
.page {
position: absolute;
width: 180px;
height: 240px;
border: 1px solid #ccc;
transition: transform 0.3s ease;
}
.active {
z-index: 10;
transform: scale(1.1);
}
.inactive {
z-index: 1;
transform: scale(1);
}
</font>
通过 JS 或 CSS 类切换，配合动画，可以让用户感知到“哪一层正在被操作”。
注意事项与技巧
- 避免给所有元素设置过高 z-index（如 9999），容易造成层级混乱
- 动画中 z-index 的变化是瞬时的，不能缓动，适合做“开关式”层级切换
- 父元素的 z-index 和 stacking context 会影响子元素表现，注意结构设计
- 移动端注意硬件加速：添加 transform: translateZ(0) 可提升动画性能
