HTML CSS

TYPEWRITER EFFECT WITH PURE CSS

(a quick guide)

<p id="tw"></p>

HTML - EMPTY PARAGRAPH

01

KEYFRAMES TO “TYPE TEXT” @keyframes write {   0% { content: ""; }   30% { content: "W"; }   60% { content: "WO"; }   90% { content: "WOW"; }   100% { content: "WOW"; }  }

CSS TYPEWRITER ANIMATION

02

ATTACH KEYFRAMES TO ::BEFORE #tw::before {   content : "";   animation: write 3s linear infinite;  }

BLINKING KEYFRAMES @keyframes blink {   0% { opacity: 0; } 100% { opacity: 1; }  }

EXTRA BLINKING CURSOR

03

USE ::AFTER TO CREATE “CURSOR” #tw::after {   content: "|";   animation: blink infinite alternate 0.4s;  }