CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ambach 66
ambach 66

Reputation: 113

Text inside each html row or column color to change one by one

I need a help to allow number from 10 to 21 to change font color to white one by one and keep on looping. something like when we are inside lift- it keep in glowing floor number as and when it reach that floor. 

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

Upvotes: 0

Views: 74

Answers (1)

Md Abdul Kaium
Md Abdul Kaium

Reputation: 26

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

Upvotes: 1

Related Questions