javascript - 每个html行或列颜色中的文本逐一更改

Question

我需要帮助让数字从 10 到 21 将字体颜色逐一更改为白色并继续循环。就像我们在电梯里时一样——当它到达那个楼层时，它会保持发光的楼层数。

.grid {
    max-width: var(--wrapper);
    display: grid;
    grid-template-columns: repeat(var(--noOfColumns), 1fr);
    grid-auto-flow: dense;
    /* If the content is taller then the box will grow to fit. This is only going to work if the column value is 1fr*/
    grid-auto-rows: var(--rh);
    grid-row-gap: var(--gutter);
    margin: var(--gutter);
    background-color: #555e65;
}

<div class="grid">
    <div >10</div>
    <div>14</div>
    <div >18</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div >20</div>
    <div>21</div>

Answer 1

.grid {
  max-width: var(--wrapper);
  display: grid;
  grid-template-columns: repeat(var(--noOfColumns), 1fr);
  grid-auto-flow: dense;
  /* If the content is taller then the box will grow to fit. This is only going to work if the column value is 1fr*/
  grid-auto-rows: var(--rh);
  grid-row-gap: var(--gutter);
  margin: var(--gutter);
  background-color: #555e65;
}

@keyframes changeColor {
 from{color:red}
 to{color:red};
}

.animate {
  color: blue;
  transition: color .3s ease;
  animation: changeColor 10s;
}

.animate:nth-child(1) {
  animation-delay: .01s;
}

.animate:nth-child(2) {
  animation-delay: 10s;
}

.animate:nth-child(3) {
  animation-delay: 20s;
}
.animate:nth-child(4) {
  animation-delay: 30s;
}

.animate:nth-child(5) {
  animation-delay: 40s;
}

.animate:nth-child(6) {
  animation-delay: 50s;
}
.animate:nth-child(7) {
  animation-delay: 60s;
}

.animate:nth-child(8) {
  animation-delay: 70s;
}

.animate:nth-child(9) {
  animation-delay: 80s;
}

<div class="grid">
  <div class="animate gr">10</div>
  <div class="animate">14</div>
  <div class="animate">18</div>
  <div class="animate">17</div>
  <div class="animate">18</div>
  <div class="animate">19</div>
  <div class="animate">20</div>
  <div class="animate">21</div>
</div>