datepicker/src/components/modal/modal.css

@keyframes bounceIn {
  0% { 
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounceOut {
  20% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes slideDownIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(.8);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}

@keyframes slideDownOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(.8);
  }
}

.container {
  width: 280px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.month-container {
  z-index: 10;
}
.in {
  animation: slideDownIn 0.2s;
}
.out {
  animation: slideDownOut 0.2s;
}
.panel {
  position: relative;
}
.month-panel {
  height: 100%;
  min-height: 298px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: 35px auto;
}