CSSやJavascriptで白文字黒背景の文字を文字の頭の位置から右に伸びて出現するアニメーションを実現したいのですがうまくいきません

Question

イメージとしては、
以下３つのサイトにあるサンプルのようなアニメーションを
再現したいのですが

①
その2. スライドで登場するテキストアニメーション
https://baigie.me/officialblog/2021/02/25/css-tips-1/

②
https://codepen.io/yukeka/pen/XWmdZVj

③
背景色が流れてくる
https://b-risk.jp/blog/2021/01/anim-reference/

２日間色々試しているのですが
うまく機能しません。

具体的な内容としては、
白文字の黒背景の見出しを
左画面からスライドインしてくるのではなく、
文字の頭から右に出現して、リピートなしにしたいのです。

そしてホバーではなく
LPでそのエリアが表示されたときに
そのアニメーション効果が発動するようにしたいのです。

今の段階では、（https://coco-factory.jp/ugokuweb/move02/8-2/）
このサイトにある内容を参考に文字がうごくところまで行ったのですが
背景はそのままの状態で機能してません。

ちなみにワードプレスにてLP制作で
実現しようとしています。

お手上げ状態なので、教えていただけると助かります。

Comments

[agumon]

実コードをご提示ください。
サンプルだけ提示されても回答しようがありません。