使用:nth-child为不同元素设置CSS动画时长失效问题排查

你的动画时长设置不生效，核心问题是CSS选择器的匹配层级错误，导致:nth-child规则根本没命中目标元素。

为什么会这样？ #

看你的DOM结构：

<h3>
  <span><span>Zephex® 152a: reducing</span></span> <!-- 第1个h3的直接子span -->
  <span><span>the carbon footprint of</span></span> <!-- 第2个h3的直接子span -->
  <span><span>asthma inhalers</span></span> <!-- 第3个h3的直接子span -->
</h3>

每个包含文本的最内层<span>，都是它父级<span>的唯一子元素。也就是说：

• 第一个内层span是它父span的:nth-child(1)
• 第二个内层span同样是它父span的:nth-child(1)
• 第三个内层span还是它父span的:nth-child(1)

所以你写的h3 > span > span:nth-child(2)和:nth-child(3)完全找不到任何元素，而h3 > span > span:nth-child(1)会匹配所有三个内层span，导致它们的动画时长都被设为5s（或者被其他规则覆盖）。

修正后的代码 #

把:nth-child的匹配层级移到h3的直接子span上，先选中h3下的第n个中间span，再定位里面的文本span：

h3 { 
  font-family: "Open Sans"; 
  text-align: left; 
  line-height: normal; 
  color: #636363; 
}
h3 span { display: block; }
h3 > span { overflow: hidden; }
h3 > span > span { 
  position: relative; 
  animation-name: reveal-up; 
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); 
}
/* 修正选择器：针对h3的第n个直接子span内的文本span */
h3 > span:nth-child(1) > span { animation-duration: 5s; }
h3 > span:nth-child(2) > span { animation-duration: 10s; }
h3 > span:nth-child(3) > span { animation-duration: 15s; }

@keyframes reveal-up { 
  from { transform: translateY(100%); } 
  to {transform: translateY(0); } 
}

这样就能让每行文本分别应用5s、10s、15s的动画时长，实现依次滑入的效果。

内容的提问来源于stack exchange，提问作者alexkodr