Текст обрезки в анимации по высоте текста ⇐ Jquery

[Anonymous]

У меня есть блок с текстовым текстовым тестом . Здесь слово текст должен измениться с помощью анимации. Но у меня есть проблема, что во время анимации текстовый тест выходит за рамки высоты текстового текста , что не должно произойти. И я не могу сделать так, чтобы тест отрезал
вот как он работает для меня сейчас


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);
});< /code>
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;
}< /code>


TEXTTESTTEST

Подробнее здесь: https://stackoverflow.com/questions/795 ... ext-height