Adding CSS animates to keyframes animation - html

Question

I have this rotating text effect that I created but I am having trouble getting adding CSS to create a smooth transition. I have posted an example of the effect I am trying to achieve. So far the text is rotating but no smooth animation
#keyframes animate {
0% {
content: "MIND"
}
25%{
content: "BODY"
}
50% {
content: "HEART"
}
75% {
content: "SOUL"
}
100% {
content: "TEARS"
}
}
.rotate-text::before {
content: "TRIBE";
animation: animate infinite 5s;
}
<span class="example-text">This text will<span class='rotate-text'> </span></span>

Answer 1

You can try using css transform rotateX
HTML:
This text will
<div class='rotate-text'>
<span>Mind</span>
<span>BODY</span>
<span>HEART</span>
<span>SOUL</span>
<span>TEARS</span>
</div>
CSS:
.rotate-text {
display: inline-block;
position: relative;
height: 1em;
}
.rotate-text span {
position: absolute;
top: 0;
left: 0;
transition-property: transform;
transform: rotateX(-90deg);
transform-origin: top;
}
JavaScript:
let duration = 0.5;
let delay = 1;
let spansCont = document.getElementsByClassName("rotate-text")[0].querySelectorAll("span");
function rotate() {
for (let i = 0; i < spansCont.length; i++) {
setTimeout(() => {
spansCont[i].style.transitionDuration = duration + "s";
spansCont[i].style.transform = "rotateX(0deg)";
setTimeout(() => {
spansCont[i].style.transformOrigin = "bottom";
spansCont[i].style.transform = "rotateX(90deg)";
setTimeout(() => {
spansCont[i].style.transitionDuration = "0s";
spansCont[i].style.transform = "rotateX(-90deg)";
spansCont[i].style.transformOrigin = "top";
}, duration * 1000);
}, duration * 1000 + delay * 1000);
}, i * (duration * 1000 + delay * 1000 + 100));
}
}
let interval = setInterval(rotate, (spansCont.length) * (duration * 1000 + delay * 1000 + 100));
rotate();