An example of how to create a typewriter text with Only CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .typewriter h1 {
        font-family: monospace;/* Web-safe typewriter-like font */
        overflow: hidden;/* Ensures the content is not revealed until the animation */
        border-right: .17em solid pink;/* The typewriter cursor */
        white-space: nowrap;/* Keeps the content on a single line */
        margin: 0 auto;/* Gives that scrolling effect as the typing happens */
        letter-spacing: .17em;/* Adjust as needed */
        animation: typing 3.5s steps(30, end), blinking-cursor .5s step-end infinite;
      }
      /* The typing effect */
      @keyframes typing {
        from {
          width: 0
        }
        to {
          width: 100%
        }
      }
      /* The typewriter cursor effect */
      @keyframes blinking-cursor {
        from,
        to {
          border-color: transparent
        }
        50% {
          border-color: pink;
        }
      }
    </style>
  </head>
  <body>
    <div class="typewriter">
      <h1>Once upon a time...</h1>
    </div>
  </body>
</html>