@zohodesk/components/lib/common/transition.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.zoomInEnter,
.zoomInLeave.zoomInLeaveActive {
  opacity: 0;
}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
  transform: perspective(1px) scale(1.5) translateZ(0);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}
.zoomInEnter.zoomInEnterActive,
.zoomInLeave {
  opacity: 1;
}
.zoomInEnter.zoomInEnterActive, .zoomInLeave {
  transform: perspective(1px) scale(1) translateZ(0);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.scaleInEnter,
.scaleInLeave.scaleInLeaveActive {
  opacity: 0;
}

.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
  transform: scale(0);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}
.scaleInEnter.scaleInEnterActive,
.scaleInLeave {
  opacity: 1;
}
.scaleInEnter.scaleInEnterActive, .scaleInLeave {
  transform: scale(1);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.fadeInEnter,
.fadeInLeave.fadeInLeaveActive {
  opacity: 0;
}

.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.fadeInEnter.fadeInEnterActive,
.fadeInLeave {
  opacity: 1;
}

.fadeInEnter.fadeInEnterActive, .fadeInLeave {
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.slideLeftEnter,
.slideLeftLeave.slideLeftLeaveActive {
  opacity: 0;
}

.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
  transform: translateX(110%);
}

[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
  transform: translateX(-110%);
}

.slideLeftEnter.slideLeftEnterActive,
.slideLeftLeave {
  opacity: 1;
}

.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
  transform: translateX(0%);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.slideDownEnter,
.slideDownLeave.slideDownLeaveActive {
  opacity: 0;
}

.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
  transform: translateY(-100%);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.slideDownEnter.slideDownEnterActive,
.slideDownLeave {
  opacity: 1;
}

.slideDownEnter.slideDownEnterActive, .slideDownLeave {
  transform: translateY(0%);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.skewInEnter,
.skewInLeave.skewInLeaveActive {
  opacity: 0;
}

.skewInEnter, .skewInLeave.skewInLeaveActive {
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
}

[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
}

.skewInEnter.skewInEnterActive,
.skewInLeave {
  opacity: 1;
}

.skewInEnter.skewInEnterActive, .skewInLeave {
  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
  transition-duration: var(--zd_transition3);
  transition-property: all;
}

.defaultEnter,
.defaultLeave.defaultLeaveActive {
  display: none;
}
.defaultEnter.defaultEnterActive,
.defaultLeave {
  display: block;
}