How to do with css that the text doesn't stop?

I want to make a text that is constantly moving. I've seen an example and I liked it, but I tried to modify it and it broke it. Now the text that rotates through two different planes, but is not continuous, is hidden but the continuation of the sentence does not appear.

To give an example, it is as if a train of 6 wagons goes around a circuit, but in some sections only 3 or 4 of the wagons appear You can see the example. The idea is that the text does not stop rotating but in a more realistic and continuous way, now the sentence is broken

How can this be corrected so that the sentence always looks complete?

What must be done so that the text does not stop and the sentence is always continuous?

I have tried to increase the size of the planes, but it does not work, the sentence is broken anyway Thank you

html,
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: navajowhite;
}

.box {
  display: flex;
}

.box .inner {
  width: 600px;
  height: 300px;
  line-height: 300px;
  font-size: 6em;
  font-family: sans-serif;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.box .inner:first-child {
  background-color: indianred;
  color: darkred;
  transform-origin: right;
  transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
  background-color: lightcoral;
  color: antiquewhite;
  transform-origin: left;
  transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
  position: absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
  animation-delay: 3.5s;
  left: -100%;
}

@keyframes marquee {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>texto en 3D</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <span>welcome to my restaurant</span>
    </div>
    <div class="inner">
      <span>welcome to my restaurant</span>
    </div>
  </div>
</body>

</html>

I have modified the style file without success

html,
body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: navajowhite;
}

.box {
    display: flex;
}

.box .inner {
    width: 600px;
    height: 300px;
    line-height: 300px;
    font-size: 6em;
    font-family: sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

.box .inner:first-child {
    background-color: indianred;
    color: darkred;
    transform-origin: right;
    transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
    background-color: lightcoral;
    color: antiquewhite;
    transform-origin: left;
    transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
    position: absolute;
    animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
    animation-delay: 3.5s;
    left: -100%;
}

@keyframes marquee {
    from {
        left: 100%;
    }

    to {
        left: -100%;
    }
}

Solution

The .box element has been widened to 1200px and given a perspective value of 1000px. The transform-origin property on the .box .inner elements has been adjusted to position the text closer to the front of the box and prevent it from disappearing behind the sides.

The animation property on the .box .inner span elements has been slowed down to 20 seconds, and the from and to values in the @keyframes rule have been changed to use transform instead of left, which allows for a smoother and more continuous motion.

With these changes, the text should rotate smoothly and continuously without any breaks in the sentence.

html,
    body {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: navajowhite;
    }

    .box {
      display: flex;
      width: 1200px;
      perspective: 1000px;
    }

    .box .inner {
      width: 600px;
      height: 300px;
      line-height: 300px;
      font-size: 6em;
      font-family: sans-serif;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
    }

    .box .inner:first-child {
      background-color: indianred;
      color: darkred;
      transform-origin: 100% 50%;
      transform: perspective(1000px) rotateY(-30deg);
    }

    .box .inner:last-child {
      background-color: lightcoral;
      color: antiquewhite;
      transform-origin: 0% 50%;
      transform: perspective(1000px) rotateY(30deg);
    }

    .box .inner span {
      position: absolute;
      animation: marquee 15s linear infinite;
    }

    .box .inner:first-child span {
      animation-delay: 0s;
      left: 100%;
    }

    @keyframes marquee {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-150%);
      }
    }

<!DOCTYPE html>
    <html lang="es">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>texto en 3D</title>
      <link rel="stylesheet" href="index.css">
    </head>

    <body>
      <div class="box">
        <div class="inner">
          <span>welcome to my restaurant</span>
        </div>
        <div class="inner">
          <span>welcome to my restaurant</span>
        </div>
      </div>
    </body>

    </html>