An example of typewriter effect with alternating text in pure CSS3

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #71718c;
        color: #ffffff;
        font-size: 100px;
      }
      h1 {
        font-size: 30px;
      }
      .text-1 {
        animation: text1;
      }
      .text-2 {
        animation: text2;
      }
      .text-1,
      .text-2 {
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        position: relative;
        animation-duration: 20s;
        animation-timing-function: steps(25, end);
        animation-iteration-count: infinite;
      }
      .text-1::after,
      .text-2::after {
        content: "|";
        position: absolute;
        right: 0;
        animation: caret infinite;
        animation-duration: 1s;
        animation-timing-function: steps(1, end);
      }
      @keyframes text2 {
        0%,
        50%,
        100% {
          width: 0;
        }
        60%,
        90% {
          width: 21.2em;
        }
      }
      @keyframes text1 {
        0%,
        50%,
        100% {
          width: 0;
        }
        10%,
        40% {
          width: 17em;
        }
      }
      @keyframes caret {
        0%,
        100% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <h1>
      <span class="text-1">I am a great heading for your static web page</span>
      <span class="text-2">Really? And this is made without JavaScriipt?</span>
    </h1>
  </body>
</html>