///////// GLOBALS ///////////
$ease-out-back: cubic-bezier(0.000, 0.920, 0.205, 1.255);
$ease-out-expo: cubic-bezier(0.000, 0.975, 0.295, 1.000);
$ease-in-out-expo: cubic-bezier(0.775, -0.015, 0.090, 0.990);


///////// KEYFRAMES /////////
@keyframes fly-up {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0px);
  }
}

@keyframes fly-down {
  0% {
    opacity: 0;
    transform: translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0px);
  }
}



///////// MIXINS /////////
@mixin flyUp($speed: 350ms, $delay: 0ms) {
  animation-name: fly-up;
  animation-timing-function: $ease-out-back;
  animation-duration: $speed;
  animation-fill-mode: both;
  animation-delay: $delay;
}

@mixin flyDown($speed: 350ms, $delay: 0ms) {
  animation-name: fly-down;
  animation-timing-function: $ease-out-back;
  animation-duration: $speed;
  animation-fill-mode: both;
  animation-delay: $delay;
}



///////// CLASSES /////////
@for $i from 1 through 100 {
  .anim-delay-#{$i * 50} {
    animation-delay: $i * 50ms !important;
  }
}
.anim-fly-up {
  @include flyUp();
}
.anim-fly-down {
  @include flyDown();
}