左から流れるようにテキストを表示するCSSアニメーションサンプル
CSSでテキストを左から流れるように表示するアニメーションを作成する方法を紹介しています。
言葉のチョイスの問題ですが、もし「流れるテキスト」という意味合いでこのページにアクセスしてしまった場合は以下の記事が目的のものかもしれません。
https://1-notes.com/css-flowing-text-animation/流れるようにテキストを表示する
See the Pen CSS | Slice Text by yochans (@yochans) on CodePen.
HTMLにはテキストを表示する為のpタグを設置しています。
<p class="flowing">HELLO WORLD</p>今回のCSSアニメーションは横幅を可変させて左側から順に表示するようにしています。
横幅がテキストの幅より短い時にデフォルトでは折り返してしまいますので「white-space: nowrap」を指定して折り返さないようにしています。
合わせてはみ出す部分を「overflow: hidden」で非表示にする必要があります。
あとはanimationプロパティを指定して、@keyframesで0％から100％になるようにアニメーションタイムラインを作成します。
.flowing {
width: 0;
margin: 0;
font-size: 3vw;
font-weight: bold;
color: #ff6347;
white-space: nowrap;
overflow: hidden;
animation: flowing-anim 3s forwards linear;
}
@keyframes flowing-anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}表示幅によってテキストの表示ペースが変わってしまいますので、サンプルコードでは「vw」を指定して文字サイズをレスポンジフ対応させて可変サイズとしています。
関連：CSS | テキストのフォントサイズをレスポンシブに対応して可変させる方法 | ONE NOTES
複数行バージョン
See the Pen CSS | Display text in a flowing manner animation by yochans (@yochans) on CodePen.
HTMLには複数行のテキストを表示する為のpタグを3ブロック設置しています。
<p class="flowing">HELLO WORLD HELLO WORLD HELLO WORLD</p>
<p class="flowing">HELLO WORLD HELLO WORLD HELLO WORLD</p>
<p class="flowing">HELLO WORLD HELLO WORLD HELLO WORLD</p>そのままでは同時にアニメーションが始まってしまいますので、animation-delayにてアニメーションの開始時間を遅延させる事で順番に表示されていくようにします。
指定しているアニメーション時間（サンプルでは3s）は、テキストの描画がない部分のアニメーションも含まれます。
その為、単純にアニメーション時間分を遅延させるのではなく空白の部分の間を引いた遅延時間を設定するとテンポ良くテキストが現れるように設定できます。
.flowing {
width: 0;
margin: 0;
font-size: 3vw;
font-weight: bold;
color: #ff6347;
white-space: nowrap;
overflow: hidden;
animation: flowing-anim 3s forwards linear;
}
.flowing:nth-child(2) {
animation-delay: 2.5s;
}
.flowing:nth-child(3) {
animation-delay: 5s;
}
@keyframes flowing-anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}