CSS、
テキストを徐々に
表示させる。

 〽️ widthの変化に対応させる。
 〽️ 複数行にも挑戦。




⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。



syntax。


#element { white-space:nowrap; overflow:hidden; }

シンプルな仕組み。


こんにちは、「ふ」です。
今回はタイトルロゴのように、テキストを左から右へと徐々に表示させるアニメーションを紹介します。

仕組みはとてもシンプルです。
blockまたはinline-block要素のwidthを、0%から徐々に広げていくだけ。このやり方、あまりwebサイトで取り上げられていなかったので、記事として発信することにしました。

記事の後半では複数行のテキストを時間差で「徐々に表示」するサンプルも載せています。
「CSS1分間クッキング(笑)」のつもりで試してみてください。

CSSの準備。


widthを変化させることでテキストを「徐々表示」させるには、テキスト要素の規定値に手を加える必要があります。

<p class = "jojo"> テキストを徐々に表示。 </p>

テキストを徐々に表示。

テキストのサンプルを用意しました。widthの変化がわかりやすいよう、borderを付けています。
ただし、このままwidthを変化させてもうまくいきません。

.jojo { width:10%; }

試しにwidthを縮めてみます。

テキストを徐々に表示。

すると⬆︎のように、要素の幅に合わせて自動的に折り返されてしまいます。
white-spaceで改行禁止にしましょう。

.jojo { width:10%; 「「1white-space:nowrap;」」 }

テキストを徐々に表示。

文字列が折り返されず、1行で表示されるようになりました。
あとははみ出した部分を非表示にします。

.jojo { width:10%; white-space:nowrap; 「「1overflow:hidden;」」 }

テキストを徐々に表示。

overflow:hiddenを指定すると、<p>の領域内のみテキストが表示されるようになりました。
これで準備はOKです。

アニメーションさせる。


それではアニメーションさせてみましょう。
ここでの注意点ですが、アニメーション開始/終了時のwidthを両方明記しておかないと、連続変化してくれません。

.jojo { white-space:nowrap; overflow:hidden; animation:jojo 4s linear infinite; } @keyframes jojo { 「「4from」」 { 「「4width:0%;」」 } }

このコードでは、「開始時のwidth:0%」しか明記されていません。そうすると....

テキストを徐々に表示。

⬆︎のように、アニメーションが段階変化してしまいます。
.jojoの規定値の部分、もしくはキーフレームに「終了時のwidth」を明記するようにしましょう。

@keyframes jojo { from { width:0%; } 「「1to」」 { 「「1width:100%;」」 } }



テキストを徐々に表示。

変化前/変化後のwidthを両方明記してやることで、連続変化が得られました。
「1行だけの徐々に表示」はこれで完成です。

複数行に挑戦。


<p> CSS、
テキストを徐々に
表示させる。 </p>

CSS、
テキストを徐々に
表示させる。

3行に渡るテキスト、これを1行ごとに「徐々表示」させたい。
3行同時にwidthを広げていくのではなく、1行が表示完了のあとに2行目が徐々表示スタート..というふうにしたいですよね。

<p> <span id = 「「1"s1"」」> CSS、</span>
<span id = 「「1"s2"」」> テキストを徐々に</span>
<span id = 「「1"s3"」」> 表示させる。</span> </p>

はじめに、1行ごとに<span>要素で括ります。
それぞれに対し、1行バージョンで施したようにoverflowなどの下処理を施しましょう。

#s1,#s2,#s3 { 「「1display:inline-block;」」 overflow:hidden; white-space:nowrap; width:0%; }

また各行を<span>要素にしたため、そのままではwidthの変化に対応してくれません。
そのためdisplayプロパティでinline-block要素に変更しておきます。その他の指定は先ほどと同じです。

キーフレームです。
全ての行が表示されるまでの時間を6秒とし、1行あたりの表示時間を2秒(約33%)としました。
前の行が表示しきったら、次の行のwidthが広がり始める、といった具合です。

ここからは地道な作業。
各行ごとにキーフレームの違うアニメーションを仕込みます。

#s1 { animation:s1 6s infinite; } @keyframes s1 { bbfrom { width:0em; } bb33% { width: 4em; } bbto { width:4em; } } #s2 { animation:s2 6s infinite; } @keyframes s2 { bb0% { width:0em; } bb33% { width:0em; } bb66% { width:8em; } bbto { width:8em; } } #s3 { animation:s3 6s infinite; } @keyframes s3 { bb0% { width:0em; } bb66% { width:0em; } bbto { width:6em; } }

幅は「文字数*em」で指定すると、おおよその幅になるので便利です。

CSS、
テキストを徐々に
表示させる。

完成です⬆︎。
レスポンシブ指定においてfont-sizeを変更している場合は。テキスト全体がちゃんと表示されるか、スマホ/PCでの挙動を確認しましょう。
不具合がある場合は、広がったときのwidthの値を調整する必要があります。

複数行は手作業多し。


任意のテキスト内容を自動で調整、というわけにはいかない。完全な手作業。 jsでテキストを配列化し、1文字ずつ追加←改行の際に少し間をとるなどの工夫もしたい。

最後までお読みくださり、ありがとうございます。
今回はCSSだけを使って「テキストを徐々に表示する」というものを作ってみました。

1行だけのテキストであれば、実装はすごく簡単にできます。が、複数行に渡るテキストを「徐々表示」させるとなると、地道な手作業に💧
また任意のテキストを自動で「徐々表示」させるとなると、CSSだけでは事足りません。複雑かつ自動化したい場合は、やはりJavaScriptを取り入れたほうが良さそうです。
いづれJsバージョンが完成したら、作り方を紹介しようと思っていますので、お楽しみに。

ではまた〜 ♪



SVGでWeb Animations API。

2020.11.12
〽️ ネイティブJavaScriptでのアニメーション。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。