文字アニメーション集

<p class="textAnime">一文字ずつ出現文字</p>

.textAnime{
    clip-path: inset(0 100% 0 0);
    /* steps(9)の数字は文字数を入れる */
    animation: textAnime 2s steps(9);
    text-align: center;
    font-size: 20px;
    display: inline-block;
}

@keyframes textAnime {
    100% {
        clip-path: inset(0 0 0 0);
    }
}

クリップパスで四角形でマスクを作り、animationプロパティのsteps()を使い一文字分ずつマスクを広げて行くアニメーションです。
文字幅が同じ日本語でしか使えません。
文字幅関係なく使いたい場合、文字数を自動で反映して欲しい場合はjavascriptが必要になります。
javascriptを使うバージョンのコードも準備中なので少々お待ちください。

<p class="textAnime">横から出現文字</p>

.textAnime {
    clip-path: inset(0 100% 0 0);
    animation: textAnime 2s;
    font-size: 20px;
    display: inline-block;
}

@keyframes textAnime {
    100% {
        clip-path: inset(0 0 0 0);
    }
}

<p class="textAnime">上から出現文字</p>

.textAnime {
    clip-path: inset(0 0 100% 0);
    animation: textAnime 2s;
    font-size: 20px;
    display: inline-block;
}

@keyframes textAnime {
    100% {
        clip-path: inset(0 0 0 0);
    }
}

<p class="textAnime">TEXT</p>

.textAnime {
    height: 35px;
    overflow: hidden;
}
.textAnime span{
    display: inline-block;
    font-size: 35px;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 12px;
    line-height: 1;
    -webkit-text-stroke: 1px #555;
    transform: translateY(50px);
    animation: textAnime 1s infinite alternate;
}

@keyframes textAnime {
    100%{
    transform: translateY(0px);
    }
}

let textAnime = document.querySelectorAll(".textAnime");
for (let i = 0; i < textAnime.length; i++) {
  let text = textAnime[i].innerHTML;
  let textParts = "";
  text.split("").forEach(function (value, index) {
    textParts += '<span style ="animation-delay: ' + index * 0.2 + 's ;">' + value +
      '</span>';
  });
  textAnime[i].innerHTML = textParts;
}