@import '../theme/timing-functions';

.zent-zoom-appear,
.zent-zoom-exit {
  animation-fill-mode: both;
  animation-play-state: paused;
}

.zent-zoom-appear.zent-zoom-appear-active {
  animation: 160ms $timing-fn-ease-in 0s 1 normal both running zent-ani-zoomin,
    100ms $timing-fn-ease-in 60ms 1 normal both running zent-ani-fadein;
}

.zent-zoom-exit.zent-zoom-exit-active {
  animation: 160ms $timing-fn-ease-out 0s 1 normal both running zent-ani-zoomout,
    100ms $timing-fn-ease-out 60ms 1 normal both running zent-ani-fadeout;
}

@keyframes zent-ani-zoomin {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zent-ani-zoomout {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes zent-ani-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zent-ani-fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes zent-ani-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}