scss for loop animation

sass

by jonahe

HTML

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

SCSS

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

@keyframes fadeInOut {
  0% {
    background-color: rgba(0,0,0, 0);
  }
  50% {
     background-color: rgba(0,0,0, 1);
  }
  100% {
    background-color: rgba(0,0,0,0);
  }
}