$bit-count: 100;
$bit-percentage: 100 / $bit-count * 1%;

body {
  background-color: #343434;
}

.flag {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 150vh;
  height: 95vh;
}

.flag-part {
  width: $bit-percentage;
  height: 100%;
  position: absolute;
  top: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg');
  background-size: 150vh auto;
  animation-duration: 2000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  
  @for $i from 1 through $bit-count {
    &:nth-child(#{$i}) {
      left: #{($i - 1) * $bit-percentage};
      background-position: #{($i - 1) * $bit-percentage} 0;
      animation-name: bit-anim;
      animation-delay: #{$i * 100}ms;
    }
  }
}

// Animations
@keyframes bit-anim {
  0% {
    transform: translateY(0) skewY(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(2%);
    opacity: 0.7;
  }
}