* {
  @for $i from 1 to 50 {
    > .intro-x:nth-child($i) {
      z-index: calc(50 - $i);
      opacity: 0;
      position: relative;
      transform: translateX(50px);
      animation: 0.4s intro-x-animation ease-in-out 0.33333s;
      animation-fill-mode: forwards;
      animation-delay: calc($i * 0.1s);
    }
    > .-intro-x:nth-child($i) {
      z-index: calc(50 - $i);
      opacity: 0;
      position: relative;
      transform: translateX(-50px);
      animation: 0.4s intro-x-animation ease-in-out 0.33333s;
      animation-fill-mode: forwards;
      animation-delay: calc($i * 0.1s);
    }
    > .intro-y:nth-child($i) {
      z-index: calc(50 - $i);
      opacity: 0;
      position: relative;
      transform: translateY(50px);
      animation: 0.4s intro-y-animation ease-in-out 0.33333s;
      animation-fill-mode: forwards;
      animation-delay: calc($i * 0.1s);
    }
    > .-intro-y:nth-child($i) {
      z-index: calc(50 - $i);
      opacity: 0;
      position: relative;
      transform: translateY(-50px);
      animation: 0.4s intro-y-animation ease-in-out 0.33333s;
      animation-fill-mode: forwards;
      animation-delay: calc($i * 0.1s);
    }
  }
}

@keyframes intro-x-animation {
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes intro-y-animation {
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}