Adding CSS animates to keyframes animation

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();