如何在CSS中实现多个元素交替出现的级联动画效果？-css教程-PHP中文网

css动画卡顿主因是触发布局重排，应优先使用transform和opacity；避免top/left/width/height等属性；慎用will-change；禁在动画中读写布局信息；控制关键帧数量并优化缓动函数。

如何在css中实现多个元素交替出现的级联动画效果？

直接用 animation-delay 配合 :nth-child() 或 CSS 自定义属性就能实现，不需要 JS 控制入场顺序——但延迟值设错、DOM 渲染时机不对、或混用 :nth-of-type，动画就会全卡在第一帧不动。

为什么 `animation-delay` 设了却没效果？

常见原因是选择器没匹配到目标元素，或者延迟值被浏览器忽略。比如父容器里有文字节点、注释或其它标签，:nth-child(2) 实际可能选中的是一个 <span></span> 而不是你要的 <div>。<ul> <li>优先用 <code>:nth-child(n)，它按 DOM 顺序数，不挑标签类型

别用 :nth-of-type(n)，除非你确认父元素下只有同类型子元素

延迟值写成小数（如 0.15s），整数秒（如 1s）容易因渲染帧率导致“跳帧”感

检查浏览器控制台是否报 Invalid property value —— Safari 在 iOS 16.4 之前不支持 calc(var(--i) * 0.15s) 用在 animation-delay 上

`transition-delay` 和 `animation-delay` 能混用吗？

不能直接混用在同一套动效逻辑里。两者触发机制不同：transition-delay 等待状态变化（比如 hover、class 切换）后才开始计时；animation-delay 是动画声明的一部分，页面加载即开始倒计时。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

做「一进一出」的交错入场（比如列表逐个淡入），用 animation-delay + @keyframes
做「悬停联动」（比如鼠标移上链接，背景和文字一起动），用 transition-delay + :hover 更可控
同一个元素上同时写两种 delay，后者不会覆盖前者，但行为不可预测，建议只选一种

动态插入的元素怎么加交错延迟？

纯 CSS 拿不到“第几个插入”的序号，JS 必须介入，但不能一查到元素就立刻设 style.animationDelay。

用 requestAnimationFrame 延迟赋值，确保元素已渲染：

els.forEach((el, i) => {
  requestAnimationFrame(() => {
    el.style.animationDelay = (i * 0.15) + 's';
  });
});

如果是懒加载或滚动加载的列表，监听 MutationObserver 或使用 IntersectionObserver 触发，而不是依赖初始 document.querySelectorAll
React/Vue 中，在 useEffect 或 mounted 里设 delay 前，先加个 setTimeout 或 nextTick，避免 DOM 尚未挂载完成