横から少しづつ表示されるテキスト

<div class="masked-text">
  左から表示されるテキスト
</div>

.masked-text {
  font-size: 2em;
  display: inline-block;
  background: linear-gradient(90deg, #000, #000) no-repeat;
  background-size: 0% 100%;
  color: transparent;
  background-clip: text;
  animation: revealText 2s forwards;
}

@keyframes revealText {
  to {
    background-size: 100% 100%;
  }
}