An example of how to create a typewriter text moving to left

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 40px;
        background-color: #121212;
      }
      p {
        border-right: solid 3px rgba(0, 255, 0, .75);
        white-space: nowrap;
        overflow: hidden;
        font-family: 'Source Code Pro', monospace;
        font-size: 28px;
        color: rgba(255, 255, 255, .70);
        position: absolute;
        right: 10px;
      }
      /* Animation */
      p {
        animation: animated-text 4s steps(17, end) 1s 1 normal both, animated-cursor 600ms steps(17, end) infinite;
      }
      /* text animation */
      @keyframes animated-text {
        from {
          width: 0;
        }
        to {
          width: 286px;
        }
      }
      /* cursor animations */
      @keyframes animated-cursor {
        from {
          border-right-color: rgba(0, 255, 0, .75);
        }
        to {
          border-right-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <p>I am being typed.</p>
  </body>
</html>