JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<article class="">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

SCSS

article {
  border: 5px solid black;
  
  $duration: 3s;
  $item-count: 5;
  $item-delay-unit: $duration / $item-count;
  
  section {
    background: black;
    display: inline-block;
    width: 50px;
    height: 20px;
    border: 1px solid orange;
    animation: fadeInOut 3s infinite;
    
    @for $i from 1 through $item-count {
      &:nth-child(#{$i}) {
        background: red;
        animation-delay: #{ 0s + $i * $item-delay-unit };
      }
        /* transition: all .2s #{$i * .1}s ease-in; */
    }
  }
  
}

@keyframes fadeInOut {
  49% {
        background: red;
  }
  50% {
    background: black;
  }
  65% {
        background: red;
  }
}