html - 多个文本更改动画不起作用

Question

我最近一直在深入研究动画，想制作一个从一个词过渡到另一个词、再到另一个词等的文本动画，虽然我使用的代码确实做了它应该做的事情，但有一个在你看到文本变化的地方之间的框架。有谁知道如何解决这一问题？

尝试添加更多关键帧使其更像阶梯式代码，但这似乎不起作用。

HTML(文本发生变化的地方):

<h2 class="subtitle">I am feeling <b class="moods"></b></h2>

CSS

.moods:before {
    content: 'sad';
    animation-name: head;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}
@keyframes head {
    0% {opacity:0;}
    5% {opacity:1; content: "sad";  }
    10% {opacity:0;}
    15% {opacity:1; content: "happy"; }
    20% {opacity:0; }
    25% {opacity:1; content: "joyfull"}
    30% {opacity:0;}
    35% {opacity:1; content: "mad"}
    40% {opacity:0; }
    45% {opacity:1; content: "depressed"}
    50% {opacity:0; }
    55% {opacity:1; content: "angry"}
    60% {opacity:0; }
    65% {opacity:1; content: "twitchy"}
    70% {opacity:0; }
    75% {opacity:1; content: "sick"}
    80% {opacity:0; }
    85% {opacity:1; content: "healthy"}
    90% {opacity:0; }
    95% {opacity:1; content: "energetic"}
    100% {opacity:0;}
}

我已经喜欢它的工作方式了，我只是希望它能够平稳过渡，而不会在更改类(class)内容时看到单词发生变化。

Answer 1

我们可以通过使用逗号将我们的转换链接在一起，然后播放它们的持续时间和延迟来创建与关键帧动画中可能的相同类型的多步移动效果，从而使事情变得更有趣。