javascript - Change text size and color incrementally

Question

I want to know if it's possible to change the text size and color incrementally on the same line, like this:

I want to use CSS only if possible. Any other solution, that at least doesn't force me to put each letter in its own span, is welcome, too.

body {
  font-family:monospace;
}

<span style="font-size:50px;">L</span><span style="font-size:45px;opacity:0.7">o</span><span style="font-size:38px;opacity:0.5">r</span>...

Answer 1

What about some transformation and gradient without all these markup:

body {
  perspective: 250px;
  perspective-origin: bottom;
}

div {
  font-size: 70px;
  background: linear-gradient(to right, black,rgba(0,0,0,0.3),rgba(0,0,0,0.2));
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: rotateY(70deg);
  transform-origin: left;
}

<div>
  Lorem Ipsum Lorem
</div>