CSS3动画文字颜色变化

Question

我是CSS3的新手并且正在尝试学习，但也可以将它应用到我正在开发的项目中。我想我并不遥远，但这只是我坚持的最后一点。

我想要实现的是字母更改为替代颜色然后返回原始颜色但它逐个循环通过字母

即。字母A变为深蓝色=＆gt;浅蓝色=＆gt;深蓝 字母B变为淡蓝色=＆gt;深蓝色=＆gt;浅蓝色

这是我到目前为止的代码

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

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

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

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

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

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

	100%
	{
	color: #95D1D7;
	}
}

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

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

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

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

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

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

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

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

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

ul li:nth-child(9)
{
	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

我设法解决了我的问题，这就是我如何实现它

＆＃13;

＆＃13;

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

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

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

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

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

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

	100%
	{
	color: #95D1D7;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是另一种方法，你可以保存（一些规则：）

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>