How to make typing animation for every line in an order with CSS?

Question

<div class='screen'>
  <div class='text-container'>
    <p class='text'>A problem has been detected and system has been shut down to prevent damage to your computer.
    </p>
    <br />
    <p class='text'>IRQL_NOT_LESS_OR_EQUAL</p>
    <br />
    <p class='text'>If this is the first time you've seen this Stop error screen, restart your computer.</p>
    <p class='text'>If this screen appears again, follow these steps:</p>
    <br />
    <p class='text'>Check to make sure any new hardware or soFtware is properly installed.</p>
    <p class='text'>If this is a new installation,</p>
    <p class='text'>ask your hardware or soFtware manufacturer for any system updates you might need.</p>
    <br />
    <p class='text'>If problems continue, disable or remove any newly installed hardware or soFtware.</p>
    <p class='text'>Disable BIOS memory options such as caching or shadowing.</p>
    <p class='text'>If you need to use Safe Mode to remove or disable components, restart your computer.</p>
    <p class='text'>press F8 to select Advanced Startup options, and then select Safe Mode.</p>
    <br />
    <p class='text'>Technical information:</p>
    <br />
    <p class='text'>*** STOP: 0x0000000A /0x0000000000004A,</p>
    <p class='text'>0x0000000000000002, 0x0000000000000001, 0xFFFFF80002B37ABF</p>
    <br />
    <p class='text'>Collecting data for crash dump ...</p>
    <p class='text'>Initializing disk for crash dump ...</p>
    <p class='text'>Beginning dump of physical memory.</p>
  </div>
</div>

*{
  padding: 0;
  margin:0;
  box-sizing: border-box;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

div.screen {
    background-color: #032f7c;

    div.text-container {
      padding: 20px;
      
      p.text {
        font-family: monospace;
        color: #ebf6ff;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 1.5px;
        animation: typing 5s steps(90, end);
      }
    }
  }

What I want to do is here showing the text to the user with a typing animation that line by line, one after the other, from top to bottom. I tried many things but I couldn't find a solution other than defining a different keyframe for each p.text element. In this way my code turns into spaghetti because there are 17 p.text element. How do I do?

Here is this problem's codepen link : https://codepen.io/mehmetguduk/pen/RwJqzpN

Answer 1

You need to apply a delay manually to each line. With SCSS, an example code snippet to do so is using a @for loop and then multiplying the index with the duration of the animation.

    @for $i from 0 through 20 {
      p.text:nth-of-type(#{$i + 1}) {
        animation-delay: #{$i * 4}s;
      }
    }

This, of course, needs some additional tweaking for the perfect timing, but should give you a general idea of how to solve this.

Make sure, your animation state is also set to both, so the text is already hidden in the beginning and stays visible after the end of the animation.

Edit:

You can also use JavaScript to set the animation-delay, like this:

document.querySelectorAll('p.text').forEach((el, i) => el.style.animationDelay = `${i * 5}s`)