循环文本轮播的关键帧动画出现问题

Question

我有一个文本轮播，我正在尝试根据我的需要进行调整，但我似乎无法解决我遇到的问题。我所拥有的是在无限循环中一个接一个地循环的评论。问题是在第三次审核周期之后，第三次审核和第一次审核之间有大量空白时间再次出现。我是否需要弄乱每个关键帧循环集上的百分比，直到我将它们排列得足够整齐，以便在末尾没有巨大的空白 space 的情况下平稳循环？如果是这样，最好的方法是什么？

.content-slider {
 width: 400px;
 height: 360px;
 text-align: center;
}

.book-headline {
 font-size: 24px;
 text-align: center;
 text-decoration: underline;
}

.slider {
 height: 320px;
 width: 400px;
 margin: 20px auto 0;
 overflow: visible;
 position: relative;
}

.mask {
 overflow: hidden;
 height: 320px;
}

.slider ul {
 margin: 0;
 padding: 0;
 position: relative;
}

.slider li {
 width: 400px;
 height: 320px;
 position: absolute;
 top: -325px;
 list-style: none;
}

.slider .quote {
 font-size: 20px;
 font-style: italic;
}

.slider .source {
 font-size: 15px;
 text-align: right;
}

.slider li.anim1 {
 -moz-animation: cycle 15s linear infinite;
 -webkit-animation: cycle 15s linear infinite;
 animation: cycle 15s linear infinite;
}

.slider li.anim2 {
 -moz-animation: cycle2 15s linear infinite;
 -webkit-animation: cycle2 15s linear infinite;
 animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
 -moz-animation: cycle3 15s linear infinite;
 -webkit-animation: cycle3 15s linear infinite;
 animation: cycle3 15s linear infinite;
}
.slider:hover li {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
}

@-moz-keyframes cycle {
 0% {
  top: 0px;
 }
 4% {
  top: 0px;
 }
 16% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 20% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 21% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 92% {
  top: -325px;
  opacity: 0;
  z-index: 0;
 }
 96% {
  top: -325px;
  opacity: 0;
 }
 100% {
  top: 0px;
  opacity: 1;
 }
}

@-moz-keyframes cycle2 {
 0% {
  top: -325px;
  opacity: 0;
 }
 16% {
  top: -325px;
  opacity: 0;
 }
 20% {
  top: 0px;
  opacity: 1;
 }
 24% {
  top: 0px;
  opacity: 1;
 }
 36% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 40% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 41% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

@-moz-keyframes cycle3 {
 0% {
  top: -325px;
  opacity: 0;
 }
 36% {
  top: -325px;
  opacity: 0;
 }
 40% {
  top: 0px;
  opacity: 1;
 }
 44% {
  top: 0px;
  opacity: 1;
 }
 56% {
  top: 0px;
  opacity: 1;
 }
 60% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 61% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}


@-webkit-keyframes cycle {
 0% {
  top: 0px;
 }
 4% {
  top: 0px;
 }
 16% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 20% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 21% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 50% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 92% {
  top: -325px;
  opacity: 0;
  z-index: 0;
 }
 96% {
  top: -325px;
  opacity: 0;
 }
 100% {
  top: 0px;
  opacity: 1;
 }
}

@-webkit-keyframes cycle2 {
 0% {
  top: -325px;
  opacity: 0;
 }
 16% {
  top: -325px;
  opacity: 0;
 }
 20% {
  top: 0px;
  opacity: 1;
 }
 24% {
  top: 0px;
  opacity: 1;
 }
 36% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 40% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 41% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

@-webkit-keyframes cycle3 {
 0% {
  top: -325px;
  opacity: 0;
 }
 36% {
  top: -325px;
  opacity: 0;
 }
 40% {
  top: 0px;
  opacity: 1;
 }
 44% {
  top: 0px;
  opacity: 1;
 }
 56% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 60% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 61% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

<div class="content-slider">
    <div class="slider">
    <div class="mask">
        <ul>
            <li class="anim1">
                <div class="book-headline">This is a headline</div>
                <div class="quote">“Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Proin facilisis feugiat elit eu porta. 
                Fusce a leo mauris. Sed venenatis ultrices libero, eu 
                volutpat ante tristique eu.”</div>
                <div class="source">- People from Peopletown</div>
            </li>
            <li class="anim2">
                <div class="book-headline">This is a second headline</div>
                <div class="quote">“Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Proin facilisis feugiat elit eu porta. 
                Fusce a leo mauris. Sed venenatis ultrices libero, eu 
                volutpat ante tristique eu.”</div>
                <div class="source">- Person from Personhood</div>
            </li>
            <li class="anim3">
                <div class="book-headline">This is a third headline</div>
                <div class="quote">“Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Proin facilisis feugiat elit eu porta. 
                Fusce a leo mauris. Sed venenatis ultrices libero, eu 
                volutpat ante tristique eu.”</div>
                <div class="source">- Villager from Village</div>
            </li>
        </ul>
    </div>
    </div>
</div>

Answer 1

在您的 @keyframes 动画中，您在上一个动画中给出了 40% 的间隙。你已经完成了第一个动画 20% 第二个 40% 和第三个 60%。在剩下的 40% 中，所有元素都被定义为保留在我们的容器中。要平滑地制作 3 个元素的动画，您应该使用大约 33% 的差异。请检查代码片段。

此外，请始终将默认样式规则与 browser-prefixed 一起添加，并尝试通过对 @keyframes 进行一些研究来简化您的工作。我认为添加 animation-delay 可以使您的工作更轻松，因为您不需要为不同的元素定义三个不同的规则。

.content-slider {
 width: 400px;
 height: 360px;
 text-align: center;
}

.book-headline {
 font-size: 24px;
 text-align: center;
 text-decoration: underline;
}

.slider {
 height: 320px;
 width: 400px;
 margin: 20px auto 0;
 overflow: visible;
 position: relative;
}

.mask {
 overflow: hidden;
 height: 320px;
}

.slider ul {
 margin: 0;
 padding: 0;
 position: relative;
}

.slider li {
 width: 400px;
 height: 320px;
 position: absolute;
 top: -325px;
 list-style: none;
}

.slider .quote {
 font-size: 20px;
 font-style: italic;
}

.slider .source {
 font-size: 15px;
 text-align: right;
}

.slider li.anim1 {
 -moz-animation: cycle 15s linear infinite;
 -webkit-animation: cycle 15s linear infinite;
 animation: cycle 15s linear infinite;
}

.slider li.anim2 {
 -moz-animation: cycle2 15s linear infinite;
 -webkit-animation: cycle2 15s linear infinite;
 animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
 -moz-animation: cycle3 15s linear infinite;
 -webkit-animation: cycle3 15s linear infinite;
 animation: cycle3 15s linear infinite;
}
.slider:hover li {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
}

@keyframes cycle {
 0% {
  top: 0px;
 }
 4% {
  top: 0px;
 }
 29% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 33% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 34% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 92% {
  top: -325px;
  opacity: 0;
  z-index: 0;
 }
 96% {
  top: -325px;
  opacity: 0;
 }
 100% {
  top: 0px;
  opacity: 1;
 }
}

@keyframes cycle2 {
 0% {
  top: -325px;
  opacity: 0;
 }
 29% {
  top: -325px;
  opacity: 0;
 }
 33% {
  top: 0px;
  opacity: 1;
 }
 34% {
  top: 0px;
  opacity: 1;
 }
 62% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 66% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 67% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

@keyframes cycle3 {
 0% {
  top: -325px;
  opacity: 0;
 }
 62% {
  top: -325px;
  opacity: 0;
 }
 66% {
  top: 0px;
  opacity: 1;
 }
 67% {
  top: 0px;
  opacity: 1;
 }
 94% {
  top: 0px;
  opacity: 1;
 }
 98% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 99% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}


@-moz-keyframes cycle {
 0% {
  top: 0px;
 }
 4% {
  top: 0px;
 }
 29% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 33% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 34% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 92% {
  top: -325px;
  opacity: 0;
  z-index: 0;
 }
 96% {
  top: -325px;
  opacity: 0;
 }
 100% {
  top: 0px;
  opacity: 1;
 }
}

@-moz-keyframes cycle2 {
 0% {
  top: -325px;
  opacity: 0;
 }
 29% {
  top: -325px;
  opacity: 0;
 }
 33% {
  top: 0px;
  opacity: 1;
 }
 34% {
  top: 0px;
  opacity: 1;
 }
 62% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 66% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 67% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

@-moz-keyframes cycle3 {
 0% {
  top: -325px;
  opacity: 0;
 }
 62% {
  top: -325px;
  opacity: 0;
 }
 66% {
  top: 0px;
  opacity: 1;
 }
 67% {
  top: 0px;
  opacity: 1;
 }
 94% {
  top: 0px;
  opacity: 1;
 }
 98% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 99% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}


@-webkit-keyframes cycle {
 0% {
  top: 0px;
 }
 4% {
  top: 0px;
 }
 29% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 33% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 34% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 92% {
  top: -325px;
  opacity: 0;
  z-index: 0;
 }
 96% {
  top: -325px;
  opacity: 0;
 }
 100% {
  top: 0px;
  opacity: 1;
 }
}

@-webkit-keyframes cycle2 {
 0% {
  top: -325px;
  opacity: 0;
 }
 29% {
  top: -325px;
  opacity: 0;
 }
 33% {
  top: 0px;
  opacity: 1;
 }
 34% {
  top: 0px;
  opacity: 1;
 }
 62% {
  top: 0px;
  opacity: 1;
  z-index: 0;
 }
 66% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 67% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

@-webkit-keyframes cycle3 {
 0% {
  top: -325px;
  opacity: 0;
 }
 62% {
  top: -325px;
  opacity: 0;
 }
 66% {
  top: 0px;
  opacity: 1;
 }
 67% {
  top: 0px;
  opacity: 1;
 }
 94% {
  top: 0px;
  opacity: 1;
 }
 98% {
  top: 325px;
  opacity: 0;
  z-index: 0;
 }
 99% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
 100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
 }
}

<div class="content-slider">
    <div class="slider">
    <div class="mask">
        <ul>
            <li class="anim1">
                <div class="book-headline">This is a headline</div>
                <div class="quote">“Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Proin facilisis feugiat elit eu porta. 
                Fusce a leo mauris. Sed venenatis ultrices libero, eu 
                volutpat ante tristique eu.”</div>
                <div class="source">- People from Peopletown</div>
            </li>
            <li class="anim2">
                <div class="book-headline">This is a second headline</div>
                <div class="quote">“Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Proin facilisis feugiat elit eu porta. 
                Fusce a leo mauris. Sed venenatis ultrices libero, eu 
                volutpat ante tristique eu.”</div>
                <div class="source">- Person from Personhood</div>
            </li>
            <li class="anim3">
                <div class="book-headline">This is a third headline</div>
                <div class="quote">“Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Proin facilisis feugiat elit eu porta. 
                Fusce a leo mauris. Sed venenatis ultrices libero, eu 
                volutpat ante tristique eu.”</div>
                <div class="source">- Villager from Village</div>
            </li>
        </ul>
    </div>
    </div>
</div>

希望这会有所帮助。

循环文本轮播的关键帧动画出现问题

Trouble with keyframe animation for cycling text carousel

html

css

keyframe

css-animations