将 CSS 动画添加到关键帧动画

Question

我有自己创建的旋转文本效果，但我无法添加 CSS 来创建平滑过渡。我已经发布了一个我试图达到的效果的例子。到目前为止，文本在旋转，但没有流畅的动画

 @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

您可以尝试使用 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();