/* transition-appear-pop */

.transition-appear-pop-enter {
  transform: scale(0);
}

.transition-appear-pop-enter.transition-appear-pop-enter-active {
  transform: scale(1);
  transition: transform 120ms ease-out-back;
}

.transition-appear-pop-exit {
  transform: scale(1);
}

.transition-appear-pop-exit.transition-appear-pop-exit-active {
  transform: scale(0);
  transition: transform 120ms ease-in-back;
}

/* changelog new button */

.transition-changelog-appear-appear {
  transform: scale(0);
  transform-origin: bottom left;
}

.transition-changelog-appear-appear.transition-changelog-appear-appear-active {
  transform: scale(1);
  transition: transform 120ms ease-out-back .5s;
}

/* transition opacity */

.transition-opacity-enter {
  opacity: 0;
}

.transition-opacity-enter.transition-opacity-enter-active {
  opacity: 1;
  transition: opacity 90ms ease-out-back, transform 100ms ease-out-back;
}

.transition-opacity-exit {
  opacity: 1;
}

.transition-opacity-exit.transition-opacity-exit-active {
  opacity: 0;
  transition: opacity 90ms ease-in-back, transform 100ms ease-in-back;
}


/* transition slide-up */

.transition-slide-up-enter {
  opacity: 0;
  transform: translateY(15px);
}

.transition-slide-up-enter.transition-slide-up-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 75ms linear, transform 300ms ease-out-back;
}

.transition-slide-up-exit {
  opacity: 1;
  transform: translateY(0);
}

.transition-slide-up-exit.transition-slide-up-exit-active {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 200ms linear, transform 500ms ease-in-back;
}

/* transition slide-down-fast */

.transition-slide-down-fast-enter {
  opacity: 0;
  transform: translateY(-15px);
}

.transition-slide-down-fast-enter.transition-slide-down-fast-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 50ms linear, transform 150ms ease-out-back;
}

.transition-slide-down-fast-exit {
  opacity: 1;
  transform: translateY(0);
}

.transition-slide-down-fast-exit.transition-slide-down-fast-exit-active {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 100ms linear, transform 250ms ease-in-back;
}
