关于循环文本轮播的关键帧动画的麻烦

时间：2018-03-12 23:17:48

标签： html css css3 css-animations keyframe

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

＆＃13;
＆＃13; 
.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;
	}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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

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

＆＃13;
＆＃13; 
.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;
	}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这会有所帮助。

相关问题
最新问题