@keyframes slide-in-up {
  0% {
    opacity: 0;
    transform: translateY($animation-offset);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-down {
  0% {
    opacity: 0;
    transform: translateY(-$animation-offset);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX($animation-offset);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-$animation-offset);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scale-down-in {
  0% {
    opacity: 0;
    transform: scale(1.5,1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}

@keyframes scale-up-in {
  0% {
    opacity: 0;
    transform: scale(0.5,0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}

.slide-in-up{ opacity: 0; animation: slide-in-up $animation-duration forwards; }
.slide-in-down{ opacity: 0; animation: slide-in-down $animation-duration forwards; }
.slide-in-left{ opacity: 0; animation: slide-in-left $animation-duration forwards; }
.slide-in-right{ opacity: 0; animation: slide-in-right $animation-duration forwards; }
.slide-out-up{ @extend .slide-in-up; animation-direction: reverse; }
.slide-out-down{ @extend .slide-in-down; animation-direction: reverse; }
.slide-out-left{ @extend .slide-in-left;  animation-direction: reverse; }
.slide-out-right{ @extend .slide-in-right;  animation-direction: reverse; }
.fade-in{ opacity: 0; animation: fade-in $animation-duration forwards; }
.fade-out{ @extend .fade-in; animation-direction: reverse; }
.scale-down-in{ opacity: 0; animation: scale-down-in $animation-duration forwards; }
.scale-up-in{ opacity: 0; animation: scale-up-in $animation-duration forwards; }

.loop{ animation-iteration-count: infinite; }