@appearhere/bloom/components/Modal/ModalAnimator.css

Appear Here's pattern library and styleguide

.root {
  position: fixed;
  height: 100%;
  max-height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
}

.root * {
  box-sizing: border-box;
}

.overlay {
  position: fixed;
  background-color: var(--overlay-default);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
  animation-timing-function: var(--animation-sharp);
}

.wrapper {
  position: fixed;
  height: 100%;
  width: 100%;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 350ms;
  animation-timing-function: var(--animation-sharp);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}