How to create a typewriter text using CSS animation, animation-fill-mode and animation-delay properties ?

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content p {
        border-right: .15em solid orange;
        font-family: "Courier";
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
      }
      .content p:nth-child(1) {
        width: 7.3em;
        -webkit-animation: type 2s steps(40, end);
        animation: type 2s steps(40, end);
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }
      .content p:nth-child(2) {
        width: 11.5em;
        opacity: 0;
        -webkit-animation: type2 2s steps(40, end);
        animation: type2 2s steps(40, end);
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }
      .content p:nth-child(3) {
        width: 7.3em;
        opacity: 0;
        -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
        animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }
      @keyframes type {
        0% {
          width: 0;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          border: none;
        }
      }
      @-webkit-keyframes type {
        0% {
          width: 0;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          border: none;
        }
      }
      @keyframes type2 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          opacity: 1;
          border: none;
        }
      }
      @-webkit-keyframes type2 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          opacity: 1;
          border: none;
        }
      }
      @keyframes type3 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        100% {
          opacity: 1;
        }
      }
      @-webkit-keyframes type3 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }
      @-webkit-keyframes blink {
        50% {
          border-color: tranparent;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <p>
        Lorem Ipsum
      </p>
      <p>
        Lorem ipsum is simply a false texte...
      </p>
      <p>
        Lorem Ipsum
      </p>
    </div>
  </body>
</html>