Question

我正在制作一个页面，该页面将在<span>块中的2个不同文本之间交换。我需要第一个<span>显示10-15分钟，然后第二个<span>显示仅几秒钟，然后滚动回到第一个<span>。

我正在使用CSS动画和关键帧，但是我只能弄清楚如何使两者的时间相同，因此我可以使两者都显示15分钟，并且不能分开时间。

    margin: 0;
    font-family: 'Bree Serif';
}
.rw-sentence{
    margin: 0;
    text-align: left;
}
.rw-sentence span{

}
.rw-words{
    display: inline;
}
.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    animation: rotateWord 300s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
    animation: rotateWord2 5s linear infinite 0s;
        animation-delay: 100s; 
}


}
@keyframes rotateWord {
    0% { opacity: 0; }
    1% { opacity: 1; }
    30% { opacity: 1; }
    31% { opacity: 0; }
    100% { opacity: 0; }

    @keyframes rotateWord2 {
    0% { opacity: 0; }
    1% { opacity: 1; }
    98% { opacity: 1; }
    99% { opacity: 0; }
    100% { opacity: 0; } ```

Answer 1

要提供此示例，需要做一些侦探工作，因为您没有提供相应的HTML标记，但这是一个有效的示例，它将显示word1 10秒钟和word2 5秒钟。您必须尝试（或计算）百分比值以使其适应您的要求，但是您应该能够掌握要点。

两个动画都具有相同的长度，您可以根据目标时间计算百分比值。因此，在这种情况下，总共15秒的10秒等于66.666 ...％

.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    animation: rotateWord 15s linear infinite 0s;
}

.rw-words-1 span:nth-child(2) { 
    animation: rotateWord2 15s linear infinite 0s;
}

@keyframes rotateWord {
    0% { opacity: 1; }
    65.9% { opacity: 1; }
    66% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes rotateWord2 {
    0% { opacity: 0; }
    65.9% { opacity: 0; }
    66% { opacity: 1; }
    100% { opacity: 1; }
}

<div class="rw-words-1">
  <span>word1</span>
  <span>word2</span>
</div>

可变时间的CSS动画

1 个答案: