最后一个元素比另一个元素移动得快得不成比例。 我不知道如何使@keyframes持续25%。 我想测试结果，并用它来制作文本滑块。
https://codepen.io/fredunit/pen/mwkybrl？editors=1100
null
.slide1 {animation: slide1 16s infinite;}
.slide2 {animation: slide2 16s infinite;}
.slide3 {animation: slide3 16s infinite;}
.slide4 {animation: slide4 16s infinite;}
@keyframes slide1 {
0% {opacity: 1;}
5% {opacity: 0.5;}
10% {opacity: 0.1;}
15% {opacity: 0;}
50%{opacity: 0;}
66.6% {opacity: 0;}
75%{opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide2 {
0% {opacity: 0;}
10% {opacity: 0;}
25% {opacity: 1;}
45%{opacity: 0;}
66.6% {opacity: 0;}
75%{opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide3 {
0% {opacity: 0;}
10% {opacity: 0;}
25% {opacity: 0;}
45%{opacity: 0;}
50% {opacity: 1;}
70%{opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide4 {
0% {opacity: 0;}
10% {opacity: 0;}
25% {opacity: 0;}
45%{opacity: 0;}
50% {opacity: 0;}
75%{opacity: 1;}
80%{opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}<section id="projects">
<div class="showcase">
<div class="wrapper">
<div class="slide1">Tribute Page</div>
<div class="slide2">Survey Form</div>
<div class="slide3">Technical Documentation Page</div>
<div class="slide4">Landing Page</div>
</div>
</div>null
你有4个文本，所以每一个应该是可见的25%的时间。 将其与animation-delay相结合，我认为您将得到所需的结果。 我还添加了不透明度，以便在动画开始之前隐藏文本。
null
.slide1 {animation: slide 16s infinite; animation-delay: 0s; opacity: 0;}
.slide2 {animation: slide 16s infinite; animation-delay: 4s; opacity: 0;}
.slide3 {animation: slide 16s infinite; animation-delay: 8s; opacity: 0;}
.slide4 {animation: slide 16s infinite; animation-delay: 12s; opacity: 0;}
@keyframes slide {
0% {opacity: 0;}
12.5% {opacity: 100;}
25% {opacity: 0;}
100% {opacity: 0;}
}<section id="projects">
<div class="showcase">
<div class="wrapper">
<div class="slide1">Tribute Page</div>
<div class="slide2">Survey Form</div>
<div class="slide3">Technical Documentation Page</div>
<div class="slide4">Landing Page</div>
</div>
</div>
您可以将@keyframes指令简化为:
@keyframes slide1 {
25%, 90% {opacity: 0;}
0%, 15% {opacity: 1;}
}
@keyframes slide2 {
0%, 15%, 50%, 100% {opacity: 0;}
25%, 40% {opacity: 1;}
}
@keyframes slide3 {
0%, 40%, 75%, 100% {opacity: 0;}
50%, 65% {opacity: 1;}
}
@keyframes slide4 {
0%, 65%, 100% {opacity: 0;}
75%, 90% {opacity: 1;}
}
我稍微加快了动画的速度，但这里有一个工作示例:
null
.slide1 {animation: slide1 8s infinite;}
.slide2 {animation: slide2 8s infinite;}
.slide3 {animation: slide3 8s infinite;}
.slide4 {animation: slide4 8s infinite;}
@keyframes slide1 {
25%, 90% {opacity: 0;}
0%, 15% {opacity: 1;}
}
@keyframes slide2 {
0%, 15%, 50%, 100% {opacity: 0;}
25%, 40% {opacity: 1;}
}
@keyframes slide3 {
0%, 40%, 75%, 100% {opacity: 0;}
50%, 65% {opacity: 1;}
}
@keyframes slide4 {
0%, 65%, 100% {opacity: 0;}
75%, 90% {opacity: 1;}
}<section id="projects">
<div class="showcase">
<div class="wrapper">
<div class="slide1">Tribute Page</div>
<div class="slide2">Survey Form</div>
<div class="slide3">Technical Documentation Page</div>
<div class="slide4">Landing Page</div>
</div>
</div>
</section>