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

Question

我有一个文本轮播，我正在努力适应我的需求，但我似乎无法解决我遇到的问题。我所拥有的是在无限循环中一个接一个循环的评论。问题是在第三次审查周期之后，第三次审查和再次出现的第一次审查之间存在大量空白时间。我是否需要弄乱每个关键帧循环设置的百分比，直到我将它们排成一行，以便在最后没有巨大空白的情况下顺利循环？如果是这样，最好的方法是什么？

.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% 的差异。请检查 sn-p 以获取代码。

此外，始终将默认样式规则与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>

希望这会有所帮助。