Question 345065 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – transition-delay not working on individual elements inside a container

I am working on an intro animation for a website where the children slide up from the bottom (margin-top: 80px) with the container being set a fixed height and overflow:hidden to make it look slick.

The children have a transition-delay added to make them show up one after another but the whole line of elements are showing up together.

It would be great if someone could help me out with this code.

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>

I tried to use several different display properties for children but nothing seems to be working.

Tags:

3

Answers


  1. 0

    You have apparently 2 things here to take into account is that transition delay needs to be declared right after transition itself for it to work and in your animal container class ".anim_inner_container" you are using 96px for line-height so you need to put the height to minimum 384px

    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: 384px;
  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: 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: 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: 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: 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>
    Login or Signup to reply.
  2. 0

    To make 3 animations in row for every element with different delay, you need to defind animation for each element.
    Edit: every word animation.

    example code:

    .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: 300px;
        font-family: "Calibri";
        font-size: 64px;
        line-height: 96px;
        text-overflow: clip;
      }

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

      .anim_word {
        display: block;
      }
      .anim_word {
        display: inline-flex;
        /* border: white 1px solid; */
        width: fit-content;
        height: 100px;
      }
      .anim_line .anim_word div {
        display: inline-block;
        position: static;
        width: fit-content;
        height: auto;
        top: 0;
        margin-top: 0;
        overflow: hidden;
      }

      .anim_line:nth-child(1) .anim_word:nth-child(1) div {
        animation: show;
        animation-duration: 2s;
        transition-delay: 2s;
        -webkit-transition-delay: 2s;
      }
      .anim_line:nth-child(1) .anim_word:nth-child(2) div {
        animation: show;
        animation-duration: 3s;
        transition-delay: 3s;
        -webkit-transition-delay: 3s;
      }
      .anim_line:nth-child(1) .anim_word:nth-child(3) div {
        animation: show;
        animation-duration: 4s;
        transition-delay: 4s;
        -webkit-transition-delay: 4s;
      }
      .anim_line:nth-child(1) .anim_word:nth-child(4) div {
        animation: show;
        animation-duration: 5s;
        transition-delay: 5s;
        -webkit-transition-delay: 5s;
      }




      .anim_line:nth-child(2) .anim_word:nth-child(1) div {
        animation: show;
        animation-duration: 6s;
        transition-delay: 6s;
        -webkit-transition-delay: 6s;
      }
      .anim_line:nth-child(2) .anim_word:nth-child(2) div {
        animation: show;
        animation-duration: 7s;
        transition-delay: 7s;
        -webkit-transition-delay: 7s;
      }
      .anim_line:nth-child(2) .anim_word:nth-child(3) div {
        animation: show;
        animation-duration: 8s;
        transition-delay: 8s;
        -webkit-transition-delay: 8s;
      }
      .anim_line:nth-child(2) .anim_word:nth-child(4) div {
        animation: show;
        animation-duration: 9s;
        transition-delay: 9s;
        -webkit-transition-delay: 9s;
      }

      .anim_line:nth-child(3) .anim_word {
        animation: show;
        animation-duration: 10s;
        transition-delay: 10s;
        -webkit-transition-delay: 10s;
      }

      @keyframes show {
        from {
          margin-top: 100vh;
        }
        to {
          margin-top: 0;
        }
      }
    <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"><div>A</div></div>
            <div class="anim_word"><div>product</div></div>
            <div class="anim_word"><div>designer</div></div>
            <div class="anim_word"><div>helping</div></div>
          </div>
          <div class="anim_line">
            <div class="anim_word"><div>design</div></div>
            <div class="anim_word"><div>beautiful,</div></div>
            <div class="anim_word"><div>user</div></div>
            <div class="anim_word"><div>centered</div></div>
          </div>
          <div class="anim_line">
            <div class="anim_word">products</div>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  3. 0

    To achieve the exact result you are looking you can make sure of the css variables to calculate delay for each text element.

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

.anim_inner_container {
  position: relative;
  height: 384px;
  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;
  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;
  opacity: 0;
  animation: fadeInUp;
  animation-delay: calc(0.25s * var(--idx));
  animation-fill-mode: forwards;
  animation-duration: 1.15s;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
    <div class="container">
  <div class="anim_container">
    <div class="anim_inner_container">
      <div class="anim_line">
        <div class="anim_word" style="--idx: 0;">A</div>
        <div class="anim_word" style="--idx: 1;">product</div>
        <div class="anim_word" style="--idx: 2;">designer</div>
        <div class="anim_word" style="--idx: 3;">helping</div>
      </div>
      <div class="anim_line">
        <div class="anim_word" style="--idx: 4;">design</div>
        <div class="anim_word" style="--idx: 5;">beautiful,</div>
        <div class="anim_word" style="--idx: 6;"> user</div>
        <div class="anim_word" style="--idx: 7;">centered</div>
      </div>
      <div class="anim_line">
        <div class="anim_word" style="--idx: 8;">products</div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search