【CSS】タイピングしているかのようなテキストアニメーション
目次
テキストタイピングエフェクト
今回は、以下のタイピングしているかのようなエフェクトをCSSで作りたいと思います。
welcome to gxy-life!
HTML
<div class="wrapper">
<div class="typing-text">welcome to gxy-life!</div>
</div>CSS
.wrapper {
display: grid;
place-items: center;
height: 100vh;
background: #333;
}
.typing-text {
width: 20ch;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 4em;
color: #fff;
animation: typing 3s steps(20),
blink 1s step-end infinite
}
@keyframes typing {
0% {
width: 0;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}2,3行目 : テキストを中央寄せ
8行目 : 1chは、半角英数「0」の幅。
今回は全部で半角文字数20なので、20ch
9行目 : テキストを改行させない
11行目 : タイピングの点滅するバー
15行目 : animation: steps(20)アニメーションを20分割
16行目 : step-end : 最後に一瞬でアニメーション終了時の状態になる
19行目 : アニメーション typing 3秒かけて、20段階で、幅0px → 20ch
25行目 : アニメーション blink 1秒の内、半分は消える
参考
【CSS】animation パート1
最低限の設定とアニメーション時間（duration）と繰り返し（infinite）について
【CSS】animation パート2
アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について
まとめ
- 1chは、半角英数「0」の幅
- animation: steps(n回)でアニメーションを分割
- step-end : 最後に一瞬でアニメーション終了時の状態になる
