.am {
  .effect() {
    animation-duration: .2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.55, 0, .55, .2);
  }

  &-fade-enter-active {
    .effect();
    animation-name: amFadeIn;
    animation-play-state: running;
  }

  &-fade-leave-active {
    .effect();
    animation-name: amFadeOut;
    animation-play-state: running;
  }

  @keyframes amFadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes amFadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  &-slide-up-enter-active{
    .effect();
    animation-name: amSlideUpIn;
    animation-play-state: running;
  }

  &-slide-up-leave-active {
    .effect();
    animation-name: amSlideUpOut;
    animation-play-state: running;
  }

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

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

  @keyframes amSlideUpOut {
    0% {
      transform: translate(0, 0);
    }

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

  &-zoom-enter-active {
    .effect();

    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    animation-name: amZoomIn;
    animation-play-state: running;
  }

  &-zoom-leave-active {
    .effect();

    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
    animation-name: amZoomOut;
    animation-play-state: running;
  }

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

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

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

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

  &-slide-down-enter-active {
    .effect();
    animation-name: amSlideDownIn;
    animation-play-state: running;
  }

  &-slide-down-leave-active {
    .effect();
    animation-name: amSlideDownOut;
    animation-play-state: running;
  }

  @keyframes amSlideDownIn {
    0% {
      transform: translate(0, -100%);
    }

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

  @keyframes amSlideDownOut {
    0% {
      transform: translate(0, 0);
    }

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