.fade-enter,
.fade-leave-to {
  opacity: 0;
  // transform: rotateY(50deg);
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
  // transform: rotateY(0deg);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity, transform 200ms ease-in;
}

.expand {
  animation: scaleup 0.25s ease-in-out;
}

@keyframes scaleup {
  0% {
    margin-top: -100%;
    opacity: 0;
  }
  70% {
    margin-top: -20%;
    opacity: 0.4;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes extendElement {
  0% {
    height: 0;
  }
  50% {
    height: 35%;
  }
  100% {
    height: 100%;
  }
}

.dropDown-animation {
  animation: animationFrames;
  animation-duration: .3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
}

@keyframes animationFrames {
  0% {
    opacity: 0;
    height: 0px;
    transform: translate(0px, 3px);
  }
  100% {
    opacity: 1;
    height: auto;
    transform: translate(0px, 0px);
  }
}