テキストを先頭からカーテンの様に表示するアニメーション、と聞いてイメージわくでしょうか？
実装方法ですが、背景がベタ塗りの場合と背景が画像やグラデーション/パターン等の場合で異なります。

実装例1

背景がベタ塗りの場合の実装方法は簡単です。
テキストの上部レイヤーに背景と同じ色のボックスでテキストを隠しつつ、そのボックスを横にアニメーションしテキストを表示させます。
上部レイヤーのボックスはテキストをspanで囲うか、before/after疑似要素を用いればよいでしょう。

実装例2

背景が画像やグラデーション/パターン等の場合は少し工夫が必要です。
実装例1の方法だと背景と馴染まずにテキストを隠している事がわかってしまうからです。

このような実装もなくは無いですが、今回は何もないところからテキストが現れて欲しいので、
実装例1の様にベタ塗りのボックスではなく、表示エリア用のボックスを用意して、表示エリアを横にアニメーションさせます。

アニメーション前の配置としては、「表示エリアボックス」から右にはみ出た位置にテキストを置きます。
そして、表示エリアを左から右にアニメーションさせると同時に、テキストも左から右にアニメーションさせます。

実装例3

実装例2では少し変わった方法で実装しましたが、今はclip-pathを使用すればもっとシンプルに実装可能です。

clip-path を使用してアニメーションする場合、テキストが隠れている初期状態と、アニメーション後にテキストが表示された状態の2つの状態を用意しておき、transitionなどでアニメーションを定義します。

左からテキストが現れるようにするには、clip-pathプロパティにinsetを指定します。
初期状態は右側から左側に向けて100%切り抜いて(オフセット)テキストが見えない状態にしておきます。
アニメーション後の状態は切り抜きが無い状態にしておきます。

初期状態

clip-path: inset(0 100% 0 0);

アニメーション後

clip-path: inset(0 0 0 0);

最後に

まとめると下記の2通りになります。

• 背景がベタの場合は、上レイヤーに重ねたボックスを左右どちらかにアニメーションさせる
• 背景がベタ以外（画像やグラデーション）の場合は、表示エリアとテキストをそれぞれ別方向にアニメーションさせる。
• 背景に関わらず clip-path が使用可能なら、clip-path で切り抜きアニメーションさせる。

サイトランディング時やページスクロールに伴うアニメーションの一つとしてテキスト表示に手を加えることでリッチな印象を与えることが出来るかもしれません。