CSSだけで作る文字入力風アニメーション

こんにちは。PONです。
先日何気なくXを見ていたところ、以下のポストが目にとまりました。

・タイピング風にするために|マークが追尾
・複数行ある
・かな→漢字の変換がある

↑これCSSだけでやる方法マジで思いつかなかった...初期にdisplay:noneしてたらkeyframesでdisplayいじれないし、visibilityじゃ領域詰まらないから|の位置が連動しない...keyframesでdisplayいじらせてｸﾚ... pic.twitter.com/wjSpwfo00s
— こびと (@kobitoCode) January 30, 2024

確かに英語の入力のアニメーションは順番に文字を表示していけば良いので簡単だけど、日本語は変換が入るから難しいです。
変換前と変換後の単語が入ってしまうので文章構造的にもおかしくなったりしてcssで実装するメリットもあまり無い・・・。

しかし！
なんか方法あるんじゃないか・・・？

ということでCSSだけで文字入力風のアニメーションを作ってみました。

マークアップを考える

文字入力風のアニメーションを作るには変換前と変換後の文字列がhtml上に存在していなければなりません。
考えた結果、ルビ要素を使えば変換前と変換後の文章が存在していても違和感のない構造になると考えました。

developer.mozilla.org

実際には以下のようなマークアップを採用しました。

<ruby><span>文字</span><rp>(</rp><rt>もじ</rt><rp>)</rp> </ruby>

アニメーションの流れを考える

キャレット

文章全体を囲む親要素の疑似要素で表現します。点滅するアニメーションをつけます。

CSSで実際にアニメーションをつける

.cursor::after {
  display: inline-block;
  width: 1px;
  height: 1.2em;
  background: #000;
  content: '';
  font-size: 16px;
  animation: caret 1s step-end infinite;
}

@keyframes caret {
  50% {
    background: transparent;
  }
}

単語変換部分

簡単ですが以下のイメージのようにアニメーションさせると文字入力してるように見える気がします。

一文字ずつルビを表示し全て表示し終えたら差し替える図 — 一文字ずつルビを表示し全て表示し終えたら差し替える

1単語ずつはこれを基準に、少しずつ遅らせてアニメーションさせます。

CSSで実際にアニメーションをつける

試しに文字（もじ）のアニメーションを作ってみます。
rt要素に対してルビを表示するアニメーションとルビを非表示にするアニメーションをつけます。

rt {
 animation:
   kana steps(2) calc(2 * var(--duration-base)),
   kana-hide step-end var(--duration-base) calc(2 * var(--duration-base));
}


@keyframes kana {
 to {
   width: 2em;
 }
}


@keyframes kana-hide {
 from {
   width: 2em;
 }
}

変換後の文字はルビの非表示タイミングを待って表示させるアニメーションをつけます。

span {
 width: 2em;
 animation: henkan step-end calc((2 + 1) * var(--duration-base));
}


@keyframes henkan {
 from {
   position: absolute;
   left: -10000px;
 }
}