Det her er en ret cool lille effekt, som kan bruges til forskellige ting. Hvis du f.eks. vil vise overfor dine besøgende på din hjemmeside, at de skal skrive noget, så kan du indsætte et stykke tekst og animerer det med CSS´en herunder, så teksten bliver skrevet på skærmen, mens den besøgende kigger med – ret fedt ikke!

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

DEMO:

See the Pen CSS Typewriter Animation by Geoff Graham (@geoffgraham) on CodePen.

---