@mixin fade-left-animation {
  &.animate {
    animation-name: fadeLeft;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: both;
  }
}

@mixin fade-leftshort-animation {
  &.animate {
    animation-name: fadeLeftShort;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: both;
  }
}
@mixin fade-right-animation {
  &.animate {
    animation-name: fadeRight;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: both;
  }
}
@mixin fade-bottom-animation {
  &.animate {
    animation-name: fadeBottom;
    animation-duration: 0.8s;
    animation-timing-function: ease;
  }
}
@mixin fade-top-animation {
  &.animate {
    animation-name: fadeTop;
    animation-duration: 0.8s;
    animation-timing-function: ease;
  }
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeBottom {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeTop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}