JavaScriptは使用しないで、CSS3アニメーションでタイプライターのように一文字ずつ表示するスタイルシートを紹介します。

Pure CSS3 typing animation with steps()

[ad#ad-2]

• デモ
• 実装

デモ

デモはChrome, Safari, Firefoxでご覧ください。

デモページ

[ad#ad-2]

上記よりシンプルにし、フレキシブルにしたものもあります。
こちらはFirefox, IE10でご覧ください。

デモページ

実装

両デモの実装方法を紹介します。

HTML

HTMLは共通で、h1要素でテキストを実装するだけです。

[html]

Typing animation by Lea Verou.

[/html]

CSS:モダンブラウザ対応版

CSS3のsteps()を使用して一文字ずつ順番に表示します。
フォントはアニメーションのタイミングを同じにするため等幅（monospaceなど）で。

• Pure CSS3 typing animation with steps()

[css]
@-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; }

h1 {
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;
}
[/css]

CSS:シンプル版

サイズの単位にchを使用し、よりシンプルにした版です。
chは現在Webkit, Operaではサポートされていません。Firefox, IE10で動作します。

• Simpler CSS typing animation, with the ch unit

[css]
@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;
}
[/css]