An example of how to create a typewriter text, where the cursor style is changed

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 40px;
        background-color: #666666;
      }
      #main {
        height: 40px;
        white-space: nowrap;
        overflow: hidden;
        font-family: 'Source Code Pro', monospace;
        font-size: 28px;
        color: rgba(255, 255, 255, .70);
        position: relative;
      }
      #border {
        border-bottom: solid 3px rgba(0, 255, 0, .75);
        position: absolute;
        right: -7px;
        width: 20px;
      }
      /* Animation */
      #main {
        animation: animated-text 2s steps(30, end) 1s 1 normal both
      }
      #border {
        animation: animated-cursor 600ms steps(30, end) infinite;
      }
      /* text animation */
      @keyframes animated-text {
        from {
          width: 0;
        }
        to {
          width: 480px;
        }
      }
      /* cursor animations */
      @keyframes animated-cursor {
        from {
          border-bottom-color: rgba(0, 255, 0, .75);
        }
        to {
          border-bottom-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <div id="main">
      Once upon a time...
      <div id="border"></div>
    </div>
  </body>
</html>