<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } } h1 { font: bold 200% Consolas, Monaco, monospace; border-right: .1em solid; width: 16.5em; /* fallback */ /* 30ch; # of chars */ margin: 2em 1em; white-space: nowrap; overflow: hidden; animation: typing 20s steps(30, end), /* # of steps = # of chars */ blink-caret .5s step-end infinite alternate; } </style> </head> <body> <h1>Typing animation by Lea Verou.</h1> </body> </html>