Skip to content

Instantly share code, notes, and snippets.

@devhelper
Forked from LeaVerou/dabblet.css
Created November 16, 2013 22:20
Show Gist options
  • Save devhelper/7506114 to your computer and use it in GitHub Desktop.
Save devhelper/7506114 to your computer and use it in GitHub Desktop.
/**
* Typing animation with pure CSS.
* Works best in browsers supporting the ch unit.
*/
@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 */
width: 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;
}
<h1>Typing animation by Lea Verou.</h1>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment