文字の打ち込み演出（タイプライター）CSSジェネレーター
文字が1文字ずつタイピングされるようなアニメーション効果を生成するCSSジェネレーターです。
プレビュー
<div class="typewriter">{{text}}</div>.typewriter {
position: relative;
display: inline-block;
overflow: hidden; /* 出現前の文字を隠す */
white-space: nowrap; /* テキストの折り返しを防止 */
font-family: 'Courier New', Courier, monospace; /* タイピングに適した等幅フォント */
font-size: {{font_size}}px;
color: {{text_color}};
width: {{char_count}}ch; /* 最終的な幅を文字数に固定 */
box-sizing: content-box; /* カーソルを幅の外側に配置 */
padding-right: 0.2ch; /* カーソル用のスペースを確保 */
animation:
typing {{duration}}s infinite;
}
/* タイピングカーソル */
.typewriter::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: {{cursor_width}}px;
height: {{cursor_height}}%;
background-color: {{cursor_color}};
animation: blink-caret 0.75s step-end infinite;
}
/* タイピング演出のアニメーション */
@keyframes typing {
/* 0%から80%の期間で1文字ずつ表示 */
0% { width: 0; animation-timing-function: steps({{char_count}}, end); }
80% { width: {{char_count}}ch; animation-timing-function: step-end; }
/* 80%から100%の期間は全文字を表示した状態で静止（リセット待機） */
100% { width: {{char_count}}ch; }
}
/* カーソルの点滅アニメーション */
@keyframes blink-caret {
from, to { opacity: 0; }
50% { opacity: 1; }
}
機能、使い方
- テキスト入力に応じてタイピングのステップ数を自動的に計算し、最適なアニメーションを生成します。
steps()関数を利用することで、文字が1つずつ現れるレトロなタイプライター風の挙動を再現しています。- 等幅フォント（Monospace系）を使用することで、各文字の幅が一定になり、より正確なタイピング演出が可能です。
- アニメーションの最後に一時停止を設けることで、最後の文字まで確実に視認できる設計になっています。
CSSプロパティの説明
overflow: hiddenを使用して、描画範囲外の文字を隠すことでタイピング効果を実現しています。
white-space: nowrapを指定することで、アニメーション中に文字が折り返されるのを防いでいます。
animation-timing-functionにsteps({{char_count}})を指定し、文字数分だけ段階的に幅を広げることで、1文字ずつの打ち込みを表現しています。
padding-rightとbox-sizing: content-boxを組み合わせることで、カーソルが文字の上に重なるのを防いでいます。
