javascript – Animation | Transition in React JS

You should be able to achieve the effect with css transform by using the keyframes animation which could be defined to scale the calendar element from 1 to 0.5 and change its opacity while the animation property is used to apply the effect with a duration of 10 seconds, repeating infinitely.

body {
  margin: 0;
  overflow: hidden;
}

.calendar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: zoomEffect 10s infinite;
}

.calendar-list-view, .calendar-detail-view {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

@keyframes zoomEffect {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}