exchange-2.0/resources/assets/sass/modules/_animation.scss

@include keyframe(slide-out-up) {
  0% {
    transform: translate(0,0);
  }

  100% {
    transform: translate(0,-300%);
  }
}

@include keyframe(slide-out-down) {
  0% {
    transform: translate(0,0);
  }

  100% {
    transform: translate(0,300%);
  }
}

@include keyframe(slide-out-left) {
  0% {
    transform: translate(0,0);
  }

  100% {
    transform: translate(-300%,0);
  }
}

@include keyframe(slide-out-right) {
  0% {
    transform: translate(0,0);
  }

  100% {
    transform: translate(300%,0);
  }
}

@include keyframe(slide-in-up) {
  0% {
    transform: translate(0,-100%);
  }

  100% {
    transform: translate(0,0);
  }
}

@include keyframe(slide-in-down) {
  0% {
    transform: translate(0,100%);
  }

  100% {
    transform: translate(0,0);
  }
}

@include keyframe(slide-in-left) {
  0% {
    transform: translate(-100%,0);
  }

  100% {
    transform: translate(0,0);
  }
}

@include keyframe(slide-in-right) {
  0% {
    transform: translate(100%,0);
  }

  100% {
    transform: translate(0,0);
  }
}

@include keyframe(fade-in) {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@include keyframe(fade-out) {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@each $type in ('in', 'out') {
  @each $direction in ('up', 'down', 'left', 'right') {

    .slide-#{$type}-#{$direction}{
      @include animation(slide-#{$type}-#{$direction});
    }
  }
}

@each $type in ('in', 'out') {
  .fade-#{$type} {
    @include animation(fade-#{$type} ease-in);
  }
}