Source: http://jsfiddle.net/leaverou/y8kNx/
@-webkit-keyframes typing { from { width: 0 } to { width:16.3em } } @-moz-keyframes typing { from { width: 0 } to { width:16.3em } } @-webkit-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } @-moz-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } body { font-family: Consolas, monospace; } h4 { font-size:150%; width:16.3em; white-space:nowrap; overflow:hidden; border-right: .1em solid black; -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ blink-caret 1s step-end infinite; -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ blink-caret 1s step-end infinite; }
<h4>Typing animation in CSS3!</h4>
Demo: