[CSS]タイプライターのように一文字ずつアニメーションで表示するスタイルシート

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

Pure CSS3 typing animation with steps()

[ad#ad-2]

• デモ
• 実装

デモ

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

デモページ

[ad#ad-2]

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

デモページ

実装

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

HTML

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

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

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

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

• Pure CSS3 typing animation with steps()

@-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:シンプル版

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

• Simpler CSS typing animation, with 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;
}