容器内单个元素transition-delay不生效问题求助

你的核心问题是transition-delay没有和激活状态绑定：初始状态下给.anim_word设置的延迟，在父元素添加show类时不会被正确触发，所有单词的动画会同时启动。以下是具体修复步骤：

关键修复点 #

• 将transition-delay的规则从初始样式移到.anim_line.show .anim_word的选择器下，确保只有在动画激活时延迟才生效
• 用固定值96px代替margin-top: 100%，避免百分比计算带来的不确定性（.anim_line高度固定为96px）
• 可扩展其他行的单词延迟，实现逐行逐词的递进动画

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="container">
  <div class="anim_container">
    <div class="anim_inner_container">
      <div class="anim_line">
        <div class="anim_word">A</div>
        <div class="anim_word">product</div>
        <div class="anim_word">designer</div>
        <div class="anim_word">helping</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">design</div>
        <div class="anim_word">beautiful,</div>
        <div class="anim_word"> user</div>
        <div class="anim_word">centered</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">products</div>
      </div>
    </div>
  </div>
</div>

CSS #

.container {
  height: 100%;
  width: 100%;
  background: #121212;
}

.anim_container {
  margin: 80px;
}

.anim_inner_container {
  position: relative;
  background-color: hsla(260, 91%, 84%, 1);
  background-image:
    radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%),
    radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%),
    radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}

.anim_line {
  height: 96px;
  width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

.anim_word {
  display: inline-block;
  margin-top: 96px; /* 用固定高度代替百分比，更稳定 */
  transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -webkit-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
}

/* 激活状态下才应用延迟 */
.anim_line.show .anim_word {
  margin-top: 0;
}

/* 第一行单词延迟 */
.anim_line:nth-child(1).show .anim_word:nth-child(2) {
  transition-delay: .15s;
  -webkit-transition-delay: .15s;
}
.anim_line:nth-child(1).show .anim_word:nth-child(3) {
  transition-delay: .25s;
  -webkit-transition-delay: .25s;
}
.anim_line:nth-child(1).show .anim_word:nth-child(4) {
  transition-delay: .35s;
  -webkit-transition-delay: .35s;
}

/* 第二行单词延迟（可选扩展） */
.anim_line:nth-child(2).show .anim_word:nth-child(1) {
  transition-delay: .45s;
  -webkit-transition-delay: .45s;
}
.anim_line:nth-child(2).show .anim_word:nth-child(2) {
  transition-delay: .55s;
  -webkit-transition-delay: .55s;
}
.anim_line:nth-child(2).show .anim_word:nth-child(3) {
  transition-delay: .65s;
  -webkit-transition-delay: .65s;
}
.anim_line:nth-child(2).show .anim_word:nth-child(4) {
  transition-delay: .75s;
  -webkit-transition-delay: .75s;
}

/* 第三行单词延迟（可选扩展） */
.anim_line:nth-child(3).show .anim_word:nth-child(1) {
  transition-delay: .85s;
  -webkit-transition-delay: .85s;
}

JavaScript #

setTimeout(function() {
  $('.anim_line').addClass('show');
}, 1400);

原理说明 #

当.anim_line添加show类时，.anim_word的margin-top从96px变为0，此时绑定在.show状态下的transition-delay才会生效，实现每个单词依次向上滑入的效果。如果需要更复杂的逐行启动动画，还可以给不同的.anim_line设置单独的transition-delay，比如：

.anim_line:nth-child(1) {
  transition-delay: 0s;
}
.anim_line:nth-child(2) {
  transition-delay: 0.8s;
}
.anim_line:nth-child(3) {
  transition-delay: 1.6s;
}

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