Creating a mock terminal with a loop to delay CSS animations

Question

I'm trying to create a website with a mock terminal that has the appearance of lines being typed, one after the other. I found a CSS animation that displays one character at a time, but I'm running into issues with delaying the animations of each line so that they aren't appearing all at once.

Here's my code:

//attempted javascript loop 
// var code_lines =document.getElementsByClassName("line");

// for (i=0; i<=5; i++){
//   code_lines:nth-child(i).style.animation = "typing 2.5s steps(30, end)";
// }


//attemped jquery loop 
//$('#terminal_text').children('line').each(function () {
//    for (i=0; i<=5; i++){
//  i.style.animation = "typing 2.5s steps(30, end)";
//}
//});

.terminal {
   width: 500px; 
  height: 500px;
  background-color: black; 
  color: white;
  padding: 20px;
}

.line {
   white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typing 2.5s steps(30, end);
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

<div class="terminal"> 

<div id="terminal_text">
    <p class="line"> Last login:  </p>
    <p class="line">megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
    <p class="line">Cloning into 'Rae_Portfolio"...</p>
    <p class="line">remote: Loading website illustrations: 172 objects, done.</p>
    <p class="line">remote: Counting objects: 100% (172/172) done.</p>
  </div>
</div>

I'll tweak timing, but for now I just want the animations to start one after another. I'm having a hard time finding clear examples of how to use class children to apply the animation. Any guidance would be greatly appreciated!

Codepen: https://codepen.io/coloradical/pen/gOaMzjm

related: https://stackoverflow.com/a/60939523/8620333 .. maybe will give you a different idea — Temani Afif, Apr 19 '20 at 08:12

kmoser · Accepted Answer · 2020-04-19T04:50:15.653

Here's how I'd do it: first, remove the line class from your  tags and set them to display:none. Then, have a Javascript program add the line class to the first  and also add an event listener for the animationend event on that element. (Also change the CSS for .line so it has an additional rule for display: block.) When that event fires, it removes class line from the current  and adds the line class and the same event listener to the next . (See How do you detect when CSS animations start and end with JavaScript?.)

In other words, every time animationend fires, it removes its triggering element's line class and adds the line class as well as an event listener to the next .

https://codepen.io/km0ser/pen/xxwOjNb

function do_it() {
  $("p.line")
    .removeClass("line")
    .addClass("done")
    .next()
    .addClass("line")
    .on("animationend", function () {
      do_it();
    });
}

$("#terminal_text p.line").on("animationend", function () {
  do_it();
});

.terminal {
  width: 500px;
  height: 500px;
  background-color: black;
  color: white;
  padding: 20px;
}

.done {
  display: block !important;
}

#terminal_text p {
  display: none; /* hide by default */
}

.line {
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  animation: typing 2.5s steps(30, end);
  display: block !important;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="terminal">

  <div id="terminal_text">
    <p class="line"> Last login: </p>
    <p>megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
    <p>Cloning into 'Rae_Portfolio"...</p>
    <p>remote: Loading website illustrations: 172 objects, done.</p>
    <p>remote: Counting objects: 100% (172/172) done.</p>

  </div>
</div>

Creating a mock terminal with a loop to delay CSS animations

1 Answers1