Cropping text in animation by text height

I have a block with the text TEXT TEST. Here the word text should change with the help of animation. But I have a problem that during animation the text TEST goes beyond the height of the text TEXT, which should not happen. And I can’t make it so that TEST is cut off

This is how it works for me now

enter image description here

And it should be something like this

enter image description here

Help me please

$(document).ready(function() {
    let currentAnimation = true;

    function animateText() {
        if (currentAnimation) {
            $(".red").css({
                transform: "translateY(-100%)",
                opacity: 0
            });

            $(".blue").css({
                transform: "translateY(0)",
                opacity: 1
            });
        } else {
            $(".red").css({
                transform: "translateY(0)",
                opacity: 1
            });

            $(".blue").css({
                transform: "translateY(100%)",
                opacity: 0
            });
        }

        currentAnimation = !currentAnimation;

        setTimeout(() => {
            requestAnimationFrame(animateText);
        }, 2000);
    }

    requestAnimationFrame(animateText);
});
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: white;
  font-size: 48px;
  font-family: Arial, sans-serif;
}

.title {
  display: inline-block;
  overflow: hidden;
}

.red, .blue {
  position: absolute;
  display: inline-block;
  transition: transform 1s ease, opacity 1s ease;
}

.red {
  color: red;
}

.blue {
  color: blue;
  transform: translateY(100%);
  opacity: 0;
}
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="title">TEXT<span class="red">TEST</span><span class="blue">TEST</span></div>