@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
    overflow: clip;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    overflow: auto;
  }
}

@keyframes slideUpLeave {
  0% {
    transform: translateY(0);
    opacity: 1;
    overflow: auto;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
    overflow: clip;
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
    overflow: clip;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    overflow: auto;
  }
}

@keyframes slideRightLeave {
  0% {
    transform: translateX(0);

    overflow: auto;
  }
  100% {
    transform: translateX(100%);

    overflow: clip;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeave {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.slideFromRight {
  animation: slideRight 0.25s forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide {
  animation: slideUp 0.25s forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fadeIn {
  animation: fadeIn 0.5s ease forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fadeIn-enter-active {
  animation: fadeIn 0.5s ease;
}
.fadeIn-leave-active {
  animation: fadeInLeave 0.5s ease;
  /* or   animation : fadeIn 0.5s ease reserve ; */
}

/*
old animation
 .fadeIn-enter-active,
.fadeIn-leave-active {
  opacity : 1;
  transition: all 0.5s ease;
} */

.fadeIn-leave-to {
  opacity: 0;
}
.fadeIn-enter-from {
  opacity: 0;
}

.slideLeft-enter-active,
.slideLeft-leave-active {
  position: relative;
  left: 0;
  transition: all 0.5s ease;
}

.slideLeft-leave-to {
  position: relative;
  left: -100%;
  opacity: 0;
}
.slideLeft-enter-from {
  opacity: 0;
  position: relative;
  left: 100%;
}

.slideUp-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
  animation: slideUp 0.5s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.slideUp-leave-active {
  -webkit-transform: translate3d(0, 0, 0);
  animation: slideUpLeave 0.5s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/*
old animation
.slideUp-enter-active,
.slideUp-leave-active {
  transform: translateY(0);
  transition: all 0.5s ease;
} */

.slideUp-leave-to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translateY(100%);
  -webkit-transform: translateZ(0);
}
.slideUp-enter-from {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translateY(100%);
  -webkit-transform: translateZ(0);
}

.slideFromRight-leave-active {
  animation: slideRightLeave 0.45s ease-out;
}

.slideFromRight-enter-active {
  animation: slideRight 0.45s ease;
}

/*
old animation code
.slideFromRight-enter-active,
.slideFromRight-leave-active {
  transform: translateX(0);
  transition: all 0.5s ease-in;
} */

.slideFromRight-leave-to {
  transform: translateX(100%);
}
.slideFromRight-enter-from {
  transform: translateX(100%);
}

/* component animation */
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.componentSlideUp-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
  animation: slideUp 0.5s;
}

/* .componentSlideUp-leave-active
{
   animation : slideUpLeave 0s;
} */

/* .slideFromRight2-enter-active,
.slideFromRight2-leave-active {
    transform: translateX(0);
    transition: all 0.5s ease;
}

.slideFromRight2-leave-to {
    opacity: 0;
}

.slideFromRight2-enter-from {
    transform: translateX(100%);
} */