// space 动画

@import './../mixins/makeanim.scss';

$space-duration: 0.6s;

@mixin space-anim($className, $keyframeName) {
  @include make-anim($className, $keyframeName, $space-duration);
}

@include space-anim(space-down, amosSpaceDown);
@include space-anim(space-left, amosSpaceLeft);
@include space-anim(space-right, amosSpaceRight);
@include space-anim(space-up, amosSpaceUp);

@keyframes amosSpaceDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
}

@keyframes amosSpaceDownOut {
  0% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.2) translate(0%, 200%);
  }
}

@keyframes amosSpaceLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}

@keyframes amosSpaceLeftOut {
  0% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }
}

@keyframes amosSpaceRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}

@keyframes amosSpaceRightOut {
  0% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
}

@keyframes amosSpaceUpIn {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }
}

@keyframes amosSpaceUpOut {
  0% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%);
  }
}