$animation-wings-duration: 2s;
$amount-of-slides: 10;

#forest #bird_001 path {
  fill: #052d25;
}

.animated {
  #forest {
    #bird_001 {
      animation-name: bird_animation;
      animation-duration: 60s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      @for $i from 1 through $amount-of-slides {
        #slide-#{$i} {
          display: block;
          opacity: 0;
          animation-name: wings_animation;
          animation-duration: $animation-wings-duration;
          animation-delay: -$animation-wings-duration / $amount-of-slides * $i;
          animation-timing-function: steps(2, jump-none);
          animation-iteration-count: infinite;
        }
      }
    }
  }
}

@keyframes bird_animation {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  100% {
    transform: translate(1000px, -50px);
  }
}

@keyframes wings_animation {
  0% {
    opacity: 0;
  }
  #{($amount-of-slides - 2)/$amount-of-slides * 100}% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
