See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.
Rerundをクリックで再アニメーション↑
使用するテキストやフォントによって多少の調整が必要です。（編集箇所は後述）
CSSの解説
このアニメーションの構成要素は2つ。widthを使って1文字分ずつ幅を増やす動きと、borderの点滅です。
- アニメーションさせたい要素（クラス）の調整
- widthを文字数分の幅に調整（emやchが便利）
- border-rightでカーソルを作る
- over-flow: hiddenで範囲外の文字を非表示に
- keyframesで「1文字ずつ出現するアニメーション」を作成
- 初期状態0%時点でwidth: 0
- 100%時点でwidth: 文字数
- keyframesで「カーソルの点滅アニメーション」を作成
- 0%、100%時点で透明状態 border-color: transparent;
- 50%時点で表示 border-color: 色;
- 要素（クラス）にanimationプロパティを付与
- " , " で分けて2つのアニメーションを指定
- 「1文字ずつ出現する」はstep()を使って文字数分だけ分割、forwardsで終了時の状態を維持
- 「カーソルの点滅」は1s単位、step-endでコマ送り、inifiniteでループさせる
CSS使用時の変更点
このCSSは使用するテキストなどに応じていくつかの変更が必要です。
/***タイピングアニメーションを追加***/
.typewriter{
border-right: 0.08em solid black; /*カーソル用の線*/
overflow: hidden; /*はみ出た要素を非表示に*/
white-space: nowrap; /*1行に*/
animation: typing 4s steps(11, end) forwards, cursol 1s step-end infinite;
/*animation: アニメーション名｜時間｜分割数｜ループ */
}
/*** 1文字ずつ出現するアニメーション ***/
@keyframes typing{
0% { width: 0%; }
100% { width: 11em; }
}
/*** カーソルが点滅するアニメーション ***/
@keyframes cursol{
0%{ border-color: transparent; }/*消滅*/
50%{ border-color: black; } /*出現*/
100%{ border-color: transparent; }/*消滅*/
}- 7行目：animationプロパティのsteps(n, end)の n を文字数に変更
- 7行目：テキストの長さや好みなどに応じて、時間animation-durationを調整
- 14行目：widthを文字数と同じ幅に変更する
- 20行目：border-colorを好きな色に（点滅するカーソルの色）
幅を指定する単位は em がおすすめですが、emが合わない場合はchなどの使用も検討してみてください。