// 扑通动画

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

@mixin plop-anim($className, $keyframeName) {
  @include make-anim($className, $keyframeName);

  .#{$className}-enter,
  .#{$className}-appear {
    opacity: 0;
    animation-timing-function: $ease-out-circ;
  }

  .#{$className}-leave {
    animation-timing-function: $ease-in-circ;
  }
}

@include plop-anim(plop, amosPlop);
@include plop-anim(plop-down, amosPlopDown);
@include plop-anim(plop-up, amosPlopUp);

@keyframes amosPlopIn {
  0% {
    opacity: 0;
    transform: scale(0.9, 0.9);
  }

  10% {
    opacity: 1;
    transform: scale(0.7, 1.3);
  }

  70% {
    transform: scale(1.1, 0.95);
  }

  90% {
    transform: scale(0.97, 1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes amosPlopDownIn {
  0% {
    opacity: 0;
    transform: scale(0.9, 0.8);
    transform-origin: center top;
  }

  10% {
    opacity: 1;
    transform: scale(0.8, 1.3);
    transform-origin: center top;
  }

  70% {
    transform: scale(1, 0.95);
    transform-origin: center top;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: center top;
  }
}

@keyframes amosPlopUpIn {
  0% {
    opacity: 0;
    transform: scale(0.9, 0.8);
    transform-origin: center bottom;
  }

  10% {
    opacity: 1;
    transform: scale(0.8, 1.3);
    transform-origin: center bottom;
  }

  70% {
    transform: scale(1, 0.95);
    transform-origin: center bottom;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: center bottom;
  }
}