我有3块文字。我希望块1淡入并显示3秒钟，然后淡出。一旦其不透明度达到0，我希望文本块2淡入并显示3秒钟...与文本块3相同。我想我可以通过将am动画分配给所有3个，并且animation-delay为每个动画分配不同的动画来实现这一点，但它们似乎最终都可以统一显示：
<main>
<h2>Text block 1</h2>
<h2>Text block 2</h2>
<h2>Text block 3</h2>
</main>
@keyframes textFader {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
h2 {
animation-name: textFader;
animation-duration: 12s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
h2:first-of-type {
animation-delay: 0s;
}
h2:nth-of-type(2) {
animation-delay: 6s;
}
h2:last-of-type {
animation-delay: 12s;
}
我知道可以用3个单独的动画来完成：
@keyframes textFader1 {
0% {
color: rgba(255, 255, 255, 0);
}
8% {
color: rgba(255, 255, 255, 1);
}
25% {
color: rgba(255, 255, 255, 1);
}
33% {
color: rgba(255, 255, 255, 0);
}
100% {
color: rgba(255, 255, 255, 0);
}
}
@keyframes textFader2 {
0% {
color: rgba(255, 255, 255, 0);
}
34% {
color: rgba(255, 255, 255, 0);
}
42% {
color: rgba(255, 255, 255, 1);
}
59% {
color: rgba(255, 255, 255, 1);
}
67% {
color: rgba(255, 255, 255, 0);
}
100% {
color: rgba(255, 255, 255, 0);
}
}
@keyframes textFader3 {
0% {
color: rgba(255, 255, 255, 0);
}
66% {
color: rgba(255, 255, 255, 0);
}
83% {
color: rgba(255, 255, 255, 1);
}
91% {
color: rgba(255, 255, 255, 1);
}
100% {
color: rgba(255, 255, 255, 0);
}
}
但这是1个管理/编辑噩梦，少了3个（尤其是具有更复杂的关键帧）-有更好的方法吗？
我知道可以使用JavaScript轻松完成此操作，但是我需要仅CSS的解决方案。谁能看到我在做什么错？
h2 {
opacity: 0;
animation-name: textFader;
animation-duration: 18s; /* <---{ 6sec * num(H2) = 18sec } */
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
h2:first-of-type { animation-delay: 0s; }
h2:nth-of-type(2) { animation-delay: 6s; }
h2:last-of-type { animation-delay: 12s; }
@keyframes textFader {
0% {
opacity: 0;
} /* fade-in */
11% {
opacity: 1;
} /* show */
22% {
opacity: 1;
} /* fade-out */
33% { /* <-------------------{ 100% / num(H2) = 33% } */
opacity: 0;
} /* waiting for the finish animation of other blocks */
100% {
opacity: 0;
}
}<main>
<h2>Text block 1</h2>
<h2>Text block 2</h2>
<h2>Text block 3</h2>
</main>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句