Typewriter
Reveals text by animating width — pairs well with monospace fonts.
Preview
Tune parameters
Full code
/* Typewriter */
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
.typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; animation: typewriter 2s steps(20) both; }