转换延迟不适用于容器内的各个元素

Question

我正在为一个网站制作一个介绍动画，其中孩子们从底部向上滑动（边距顶部：80px），容器被设置为固定高度和溢出：隐藏以使其看起来光滑。

孩子们添加了一个过渡延迟，使他们一个接一个地出现，但整行元素都一起出现。

如果有人能帮助我解决这段代码，那就太好了。

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

.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: 100%;


  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;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
}


.anim_word span {}

.anim_line.show .anim_word {
  margin-top: 0%;
}

.anim_line:nth-child(1) .anim_word:nth-child(2) {
  transition-delay: .15s;
  -webkit-transition-delay: .15s;
}

.anim_line:nth-child(1) .anim_word:nth-child(3) {
  transition-delay: .25s;
  -webkit-transition-delay: .25s;
}

.anim_line:nth-child(1) .anim_word:nth-child(4) {
  transition-delay: .35s;
  -webkit-transition-delay: .35s;
}

<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>

我尝试为儿童使用几种不同的显示属性，但似乎没有任何效果。

Answer 1

这里显然有两件事需要考虑，即需要在转换本身之后立即声明转换延迟才能使其正常工作，并且在您的动物容器类“.anim_inner_container”中，您使用 96px 作为行高，因此您需要将高度最小为 288px

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

.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;
  height: 288px;
  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}


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

 .anim_word {
  display: inline-block;
  margin-top: 100%;
}


.anim_line.show:nth-child(1) .anim_word:nth-child(1) {
  display: inline-block;
  margin-top: 0%;
  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;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  transition-delay: .15s;
  -webkit-transition-delay: .15s;
}

.anim_line.show:nth-child(1) .anim_word:nth-child(2) {
  display: inline-block;
  margin-top: 0%;
  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;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  transition-delay: .25s;
  -webkit-transition-delay: .25s;
}

.anim_line.show:nth-child(1) .anim_word:nth-child(3) {
  display: inline-block;
  margin-top: 0%;
  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;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  transition-delay: .35s;
  -webkit-transition-delay: .35s;
}

.anim_line.show:nth-child(1) .anim_word:nth-child(4) {
  display: inline-block;
  margin-top: 0%;
  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;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  transition-delay: .55s;
  -webkit-transition-delay: .55s;
}

    <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>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>