CSS3 Animation Text Farbwechsel

Question

Ich bin neu in CSS3 und versuche zu lernen, könnte es aber auch auf ein Projekt anwenden, an dem ich gerade arbeite. Ich denke, ich bin nicht weit weg, aber es ist nur das letzte bisschen, auf dem ich feststecke.

Was ich will, erreichen, ist die Buchstaben auf die alternative Farbe ändern, dann gibt es ursprüngliche Farbe wiederkommen, aber es Schleifen durch die Buchstaben einzeln

dh Buchstaben A geht Dunkelblau => Licht Blau => Dark blau Letter B geht Light Blue => Dunkelblau => Light Blue

Dies ist der Code ich habe bisher

body 
 
{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t background: #FFFFFF; 
 
} 
 

 
ul 
 
{ 
 
position: absolute; 
 
top: 50%; 
 
left: 50% 
 
transform: translate(-50%,-50%); 
 
margin: 0; 
 
padding: 0; 
 
display: flex; 
 
} 
 

 
ul li 
 
{ 
 
\t list-style:none; 
 
\t 
 
\t font-size: 5em; 
 
\t letter-spacing: 15px; 
 
\t 
 
} 
 

 
ul li.A 
 
{ 
 
    color: #3D57A7; 
 
    animation: aniA 1.4s linear infinite; 
 
} 
 

 
ul li.B 
 
{ 
 
\t color: #95D1D7; 
 
\t animation: aniB 3s linear infinite; 
 
\t animation-delay: 1.6s; 
 
} 
 

 
@keyframes aniA 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t color: #3D57A7; 
 
\t } 
 

 
\t 100% 
 
\t { 
 
\t color: #95D1D7; 
 
\t } 
 
} 
 

 
@keyframes aniB 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t \t color: #95D1D7; 
 
\t } 
 
\t 100% 
 
\t { 
 
\t \t color: #3D57A7; 
 
\t } 
 
} 
 

 
ul li:nth-child(1), ul li:nth-child(10) 
 
{ 
 
\t animation-delay: .2s; 
 
} 
 

 
ul li:nth-child(2), ul li:nth-child(11) 
 
{ 
 
\t animation-delay: .4s; 
 
} 
 

 
ul li:nth-child(3), ul li:nth-child(12) 
 
{ 
 
\t animation-delay: .6s; 
 
} 
 

 
ul li:nth-child(4), ul li:nth-child(13) 
 
{ 
 
\t animation-delay: .8s; 
 
} 
 

 
ul li:nth-child(5), ul li:nth-child(14) 
 
{ 
 
\t animation-delay: 1s; 
 
} 
 

 
ul li:nth-child(6), ul li:nth-child(15) 
 
{ 
 
\t animation-delay: 1.2s; 
 
} 
 

 
ul li:nth-child(7) 
 
{ 
 
\t animation-delay: 1.4s; 
 
} 
 

 
ul li:nth-child(8) 
 
{ 
 
\t animation-delay: 1.6s; 
 
} 
 

 
ul li:nth-child(9) 
 
{ 
 
\t animation-delay: 3s; 
 
}

<ul> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li> </li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
</ul>

Answer 1

Hier ist eine andere Art und Weise Sie es tun könnte, und speichern (ein paar Regeln:)

html, body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-flex; 
 
} 
 
ul::after, 
 
ul li { 
 
    list-style: none; 
 
    font-size: 4em; 
 
    width: 50px; 
 
    text-align: center; 
 
} 
 
ul li.A { 
 
    color: #3D57A7; 
 
} 
 
ul li.B { 
 
    color: #95D1D7; 
 
} 
 
ul::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 50px; 
 
    animation: ani 4s steps(10, end) infinite; 
 
} 
 

 
@keyframes ani { 
 
    0%  { left: 0; content: 'A'; color: #95D1D7; } 
 
    49.9999% { content: 'A'; color: #95D1D7; } 
 
    50%  { color: #95D1D7; } 
 
    50.0001% { content: 'B'; color: #3D57A7; } 
 
    60%  { content: 'B'; color: #3D57A7; } 
 
    100%  { left: 100%; content: 'B'; color: #3D57A7; } 
 
}

<ul> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    </ul>

Answer 2

ich es geschafft, meine Frage zu lösen, das ist, wie ich es erreicht

body 
 
{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t background: #FFFFFF; 
 
} 
 

 
ul 
 
{ 
 
position: absolute; 
 
top: 50%; 
 
left: 50% 
 
transform: translate(-50%,-50%); 
 
margin: 0; 
 
padding: 0; 
 
display: flex; 
 
} 
 

 
ul li 
 
{ 
 
\t list-style:none; 
 
\t 
 
\t font-size: 5em; 
 
\t letter-spacing: 15px; 
 
\t 
 
} 
 

 
ul li.A 
 
{ 
 
    color: #3D57A7; 
 
    animation: aniA 2.8s linear infinite; 
 
} 
 

 
ul li.B 
 
{ 
 
\t color: #95D1D7; 
 
\t animation: aniB 2.8s linear infinite; 
 
} 
 

 
@keyframes aniA 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t color: #3D57A7; 
 
\t } 
 

 
\t 100% 
 
\t { 
 
\t color: #95D1D7; 
 
\t } 
 
} 
 

 
@keyframes aniB 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t \t color: #95D1D7; 
 
\t } 
 
\t 100% 
 
\t { 
 
\t \t color: #3D57A7; 
 
\t } 
 
} 
 

 
ul li:nth-child(1) 
 
{ 
 
\t animation-delay: .2s; 
 
} 
 

 
ul li:nth-child(2) 
 
{ 
 
\t animation-delay: .4s; 
 
} 
 

 
ul li:nth-child(3) 
 
{ 
 
\t animation-delay: .6s; 
 
} 
 

 
ul li:nth-child(4) 
 
{ 
 
\t animation-delay: .8s; 
 
} 
 

 
ul li:nth-child(5) 
 
{ 
 
\t animation-delay: 1s; 
 
} 
 

 
ul li:nth-child(6) 
 
{ 
 
\t animation-delay: 1.2s; 
 
} 
 

 
ul li:nth-child(7) 
 
{ 
 
\t animation-delay: 1.4s; 
 
} 
 

 
ul li:nth-child(8) 
 
{ 
 
\t animation-delay: 1.6s; 
 
} 
 

 
ul li:nth-child(9) 
 
{ 
 
\t animation-delay: 2.8s; 
 
} 
 

 
ul li:nth-child(10) 
 
{ 
 
\t animation-delay: 1.8s; 
 
} 
 

 
ul li:nth-child(11) 
 
{ 
 
\t animation-delay: 2s; 
 
} 
 

 
ul li:nth-child(12) 
 
{ 
 
\t animation-delay: 2.2s; 
 
} 
 

 
ul li:nth-child(13) 
 
{ 
 
\t animation-delay: 2.4s; 
 
} 
 

 
ul li:nth-child(14) 
 
{ 
 
\t animation-delay: 2.6s; 
 
} 
 

 
ul li:nth-child(15) 
 
{ 
 
\t animation-delay: 2.8s; 
 
}

<ul> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li> </li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
</ul>