.slide-appear-enter {
    transform-origin: 0 0;
    transform: translateX(15%);
    opacity: 0;
}
.slide-appear-enter-active {
    animation: .35s ease slideAppearAdd;
    opacity: 1;
}
.slide-appear-leave-active {
    animation: .35s ease slideAppearRemove;
    opacity: 1;
}


@keyframes slideAppearAdd {
    0% {
        transform-origin: 0 0;
        opacity: 0;
        transform: translateX(15%);
    }

    100% {
        transform-origin: 0 0;
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes slideAppearRemove {
    0% {
        transform-origin: 0 0;
        opacity: 1;
        transform: translateX(0%);
    }

    100% {
        transform-origin: 0 0;
        opacity: 0;
        transform: translateX(-15%);
    }
}

.ui {
  &-animate-next {
    opacity: 0;
    transform: translate3d(50%, 0, 1px);

    &-remove {
      opacity: 0;
      transform: translate3d(50%, 0, 1px);
    }

    &-remove-active {
      transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);
      opacity: 1;
      transform: translate3d(0, 0, 1px);
    }
  }

  &-animate-prev {
    opacity: 0;
    transform: translate3d(-50%, 0, 1px);


    &-remove {
      transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
      opacity: 0;
      transform: translate3d(-50%, 0, 1px);
    }

    &-remove-active {
      opacity: 1 !important;
      transform: translate3d(0, 0, 1px);
    }
  }

  @keyframes mdp-animation-bounce {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    70% {
      opacity: 1;
      transform: scale(1.05);
    }
    to {
      transform: scale(1.0);
    }
  }

  &-animation-zoom {
    &.enter {
      transition:         all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
      animation-duration: 0.3s;
      animation-name:     mdp-animation-bounce;
    }
  }

  &-hide-remove {
    animation:0.5s lightSpeedOut ease;
  }

  /* when showing the thing */
  &-hide-show {
    animation:0.5s flipInX ease;
  }


  /* ANIMATIONS (FROM ANIMATE.CSS) */
  /* flip in */
  @keyframes flipInX {
    0% {
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transition-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transition-timing-function: ease-in;
    }

    60% {
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }

    80% {
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
      transform: perspective(400px);
    }
  }

  /* light speed out */
  @keyframes lightSpeedOut {
    0% {
      opacity: 1;
    }

    100% {
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  }
}