用 transition-delay 配合 :nth-child 或 data-index 为每张图设递增延迟（如0s、0.1s、0.2s），结合 opacity、transform、visibility 三属性过渡，避免 display:none 和 DOM 结构干扰，移动端需改用 click 或 Intersection Observer 触发。
图片组悬停时怎么让每张图错开入场
靠 transition-delay 配合伪类或兄弟选择器就能做到，核心是给每张 <img> 或其容器加不同延迟值，而不是靠 JS 控制时序。
常见错误是直接给整个容器加 transition，结果所有图一起动；或者用 :nth-child(n) 但没结合实际 DOM 结构，导致延迟没生效。
- 必须对每个图片（或其父
<div>）单独设置transition-delay，不能只写在 hover 触发元素上 - 延迟值建议从
0s开始递增，比如0s、0.1s、0.2s，避免间隔太大显得断档 - 如果图片用
display: none切换，transition不会生效——得用opacity+visibility或transform
transition-delay 和 opacity / transform 怎么配才不闪
只用 opacity 容易出现渲染闪烁或边缘锯齿，尤其在 Safari；只用 transform 又没法控制显隐逻辑。稳妥做法是三者配合：opacity 控制透明度、transform 控制位移/缩放、visibility 防止点击穿透。
典型错误是漏写 visibility，导致悬停结束后图片还占位、挡住下面内容；或者把 transition 写在 opacity 上却忘了给 transform 加过渡，造成动作不连贯。
立即学习“前端免费学习笔记（深入）”；
-
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s—— 必须显式列出所有要过渡的属性 - 初始状态设为
opacity: 0; transform: translateY(10px); visibility: hidden;，hover 时改为opacity: 1; transform: translateY(0); visibility: visible; -
visibility本身不支持过渡，但加上它能让浏览器知道“这个元素现在不可见”，避免布局抖动
用 :nth-child 实现延迟时 DOM 结构有啥硬要求
:nth-child(n) 匹配的是父元素下的第 n 个子节点，不是第 n 个 <img>。如果中间夹了文字、注释或其它标签，序号就乱了，延迟会错位。
最常踩的坑是 HTML 里写了换行或空格，被解析成 Text 节点，导致 :nth-child(2) 实际匹配到的是换行符而不是第二张图。
- 确保图片容器是干净的父子结构，比如
<div class="gallery"><div><img></div><div><img></div></div> - 用
:nth-of-type(n)更安全，但它只认标签名，不适用于带 class 的 div 包裹情况 - 更稳的办法是手动加 data-index 属性，用
[data-index="1"]、[data-index="2"]等选择器，彻底避开 DOM 顺序干扰
移动端悬停效果为啥不触发，有没有替代方案
手机没有 hover 概念，:hover 在 iOS 和 Android 大部分浏览器里只在第一次点击后短暂生效，之后就失效了。指望它做交互入口基本不可靠。
有人强行用 @media (hover: hover) 做媒体查询区分，但兼容性差，而且无法解决“点了第一次之后再点没反应”的问题。
- 真要支持移动端，得改用
click或touchstart触发 class 切换，用 JS 控制is-active类，CSS 只负责过渡样式 - 如果只是想“视觉上有交错感”，可以放弃悬停，改用页面滚动进入视口时触发动画（Intersection Observer + CSS 动画）
- 别为了保持“悬停”行为而牺牲移动端体验——交错入场本质是节奏控制，触发方式可以换，但延迟逻辑不变
真正难的不是写几行 transition-delay，而是判断哪些图该延、延多少、延完要不要重置、以及用户到底用什么方式触发——这些没想清楚，代码写得再整齐也白搭。
