CSSでタイピングアニメーション
CSSでのタイピングアニメーション
https://gyazo.com/3f6e21bcd1f4144e08974ff459c7704f
code:html
<div class="typing">
This is a typing now.
</div>
code:css
.typing {
width: 16ch; // 文字数分の長さに設定
animation: typing 2s steps(16), blink .5s step-end infinite alternate;
white-space: nowrap; // 必須
overflow: hidden; // 必須
border-right: 3px solid; // カーソルの大きさを設定する
font-size: 2em;
}
@keyframes typing {
from {
width: 0 // 行頭から開始
}
}
@keyframes blink {
50% {
border-color: transparent // チカチカする表現部分
}
}
簡単なプロパティの解説
code:css
animation: typing 2s steps(16), blink .5s step-end infinite alternate;
タイピング部分
typing 2s steps(16)
stepsはsteps(n, end/start)(nは整数) という表記をし、コマ送りの程度を表します。nの数字分分割してコマ送りにします。初期値はendです。
endの場合、最初のインターバル経過後に1段階目の変化が発生します。(10までの5段階なら、2/4/6/8/10)
startの場合、開始直後に1段階目の変化が発生します。(10までの5段階なら、0/2/4/6/8)
今回の場合、steps(8) (通常の半分)としたら2文字ずつ表示されます。
/icons/hr.icon
カーソル点滅部分
blink .5s step-end infinite alternate
blinkは点滅のアニメーションです。
step-end
steps(1, end)と同じです。
infinite
アニメーションは無制限に繰り返されます。
alternate
奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返します。
/icons/hr.icon
white-space: nowrap; と、overflow: hidden がない場合下のようになります。
https://gyazo.com/02f76970bf11beea737bb7b398a2e03f
参考
👍 Yuki Agatsuma YukiAgatsuma.icon がいいねしました on 2021/5/20