typing

by kazu69

HTML

<h1>Typing animation by Lea Verou.</h1>

CSS

/**
 * Typing animation with pure CSS
 * Revised. Browser support (as of Feb 2012): Firefox, IE10
 */

@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;
}

JavaScript

//http://lea.verou.me/2012/02/simpler-css-typing-animation-with-the-ch-unit/