嵌套动画需按层级累加 animation-delay：父容器0s，一级子元素0.1s，二级0.2s；推荐CSS变量简化维护；避免:nth-child()因DOM干扰失效，改用类名或:nth-of-type()；入场动画仅用transform+opacity并启用will-change；keyframes统一用0%/100%确保精度；注意overflow:hidden裁剪动画。
animation-delay 怎么算嵌套层级的偏移
多重嵌套下想让子元素逐个“接龙”入场，核心不是靠 JS 控制，而是用 animation-delay 做时间轴编排。每层嵌套的延迟值 = 上级延迟 + 自身偏移，否则动画会全挤在一起或错序。
- 父容器设
animation-delay: 0s，动画时长animation-duration: 0.4s - 第一级子元素统一加
animation-delay: 0.1s - 第二级子元素在父级基础上再加
0.1s，即animation-delay: 0.2s（不是重写为0.1s） - 用 CSS 变量可简化维护：
--delay-base: 0.1s，子级用calc(var(--delay-base) * 2)
:nth-child() 配合 animation 为什么常失效
很多人想用 :nth-child(n) 给每个子项自动加不同 animation-delay，但实际容易翻车——因为 :nth-child() 看的是 DOM 顺序，不是视觉层级；一旦中间插入注释、文本节点或动态渲染内容，序号就乱了。
- 静态 HTML 中可用
div:nth-child(1) { animation-delay: 0s; }，但不推荐用于嵌套结构 - 更稳的方式是给每层加明确类名，比如
.item-level-1、.item-level-2，再分别设 delay - 如果必须用伪类，优先选
:nth-of-type()（只计同类型标签），比:nth-child()抗干扰稍强
transform 动画卡顿？别用 margin 或 opacity 做入场
连贯入场动画卡顿，八成是因为触发了重排（reflow）。用 margin、height、width 或没开启硬件加速的 opacity，浏览器得反复计算布局，尤其嵌套深时掉帧明显。
- 入场动画只用
transform: translateY()+opacity，且给容器加will-change: transform, opacity - 避免在动画中修改
display: none或visibility: hidden，它们会中断动画流程 - 如果必须隐藏初始状态，用
opacity: 0; transform: translateY(20px);，而不是visibility: hidden
keyframes 里用 from/to 还是 0%/100%？
对多重嵌套来说，用 0% 和 100% 更可控。因为 from/to 在某些旧版 Safari 和部分构建工具中解析不稳定，嵌套层级一多，动画起点容易漂移。
立即学习“前端免费学习笔记（深入）”；
- 写法统一用
@keyframes slideIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } - 不要混用：同一段 keyframes 里别一半用
from一半用0% - 若需中间状态（比如缓动微调），必须用百分比，
from/to不支持中间帧
嵌套越深，CSS 动画越依赖时间轴精度和渲染隔离。最容易被忽略的是：父容器的 overflow: hidden 会裁掉子元素动画过程中的临时位置，导致“闪一下就出来”，而不是平滑入场——检查每一层父容器的 overflow 设置。
