CSS Animation help (animation-delay + duration

Question

@ z bottom of the code there are 2 sentences. I want them to take turns appearing and disappearing (color:black)
But they keep overlapping.

Can someone help me fix the durations of the animation so that the sentences dont overlap each other?.

https://code.sololearn.com/WnbshApNDqAr/?ref=app

Answer 1

This worked for me:

.que {
margin-top: -25px;
color: transparent;
animation-delay: 2.5s;
animation-name: t;
animation-duration: 5s;
animation-iteration-count: infinite;
}

.loading{
animation: t 5s infinite;
color: transparent;
}

@keyframes t{
0% {
color: transparent;
}
25% {
color: transparent;
}
50% {
color: black;
}
75% {
color: transparent;
}
}

Let me explain a bit of what I changed and why.
1: I made the animation properties more explicit in the .que elements just to be clearer about what each number meant. I'm not sure if one of your numbers was setting an animation-delay before but I made sure there was one for the .que elements.
2: I updated your keyframes so the text would be transparent half the time. The animation was using transparent text at only exactly 0% or 100% last time which isn't what you wanted. This change allowed the .que elements to appear when the "loading..." element was completely transparent and vice versa.