@zohodesk/components/lib/common/animation.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

[dir=ltr] .modeForward {
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}[dir=rtl] .modeForward {
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
[dir=ltr] .infinite {
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
}
[dir=rtl] .infinite {
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
}
[dir=ltr] .both {
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}
[dir=rtl] .both {
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}
.fadeIn {
  opacity: 0;
}
[dir=ltr] .fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
}
[dir=rtl] .fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
}
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

.slideLeft {
  opacity: 0;
}

[dir=ltr] .slideLeft {
  transform: translateX(110%) scale(0);
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  -moz-animation-name: slideLeft;
  -ms-animation-name: slideLeft;
}

[dir=rtl] .slideLeft {
  transform: translateX(-110%) scale(0);
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  -moz-animation-name: slideLeft;
  -ms-animation-name: slideLeft;
}
@keyframes slideLeft {
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@-webkit-keyframes slideLeft {
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@-moz-keyframes slideLeft {
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.slideRight {
  opacity: 1;
  transform: translateX(0) scale(1);
}

[dir=ltr] .slideRight {
  animation-name:  slideRight-ltr ;
  -webkit-animation-name:  slideRight-ltr ;
  -moz-animation-name:  slideRight-ltr ;
  -ms-animation-name:  slideRight-ltr ;
}

[dir=rtl] .slideRight {
  animation-name:  slideRight-rtl ;
  -webkit-animation-name:  slideRight-rtl ;
  -moz-animation-name:  slideRight-rtl ;
  -ms-animation-name:  slideRight-rtl ;
}
@keyframes slideRight-ltr {
  100% {
    opacity: 0;
    transform: translateX(110%) scale(0);
  }
}
@keyframes slideRight-rtl {
  100% {
    opacity: 0;
    transform: translateX(-110%) scale(0);
  }
}
@-webkit-keyframes slideRight-ltr {
  100% {
    opacity: 0;
    transform: translateX(110%) scale(0);
  }
}
@-webkit-keyframes slideRight-rtl {
  100% {
    opacity: 0;
    transform: translateX(-110%) scale(0);
  }
}
@-moz-keyframes slideRight-ltr {
  100% {
    opacity: 0;
    transform: translateX(110%) scale(0);
  }
}
@-moz-keyframes slideRight-rtl {
  100% {
    opacity: 0;
    transform: translateX(-110%) scale(0);
  }
}

.slideTop {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[dir=ltr] .slideTop {
  animation-name:  slideTop-ltr ;
  -webkit-animation-name:  slideTop-ltr ;
  -moz-animation-name:  slideTop-ltr ;
  -ms-animation-name:  slideTop-ltr ;
}

[dir=rtl] .slideTop {
  animation-name:  slideTop-rtl ;
  -webkit-animation-name:  slideTop-rtl ;
  -moz-animation-name:  slideTop-rtl ;
  -ms-animation-name:  slideTop-rtl ;
}
@keyframes slideTop-ltr {
  100% {
    opacity: 0;
    transform: translateX(100%) scale(0);
  }
}
@keyframes slideTop-rtl {
  100% {
    opacity: 0;
    transform: translateX(-100%) scale(0);
  }
}
@-webkit-keyframes slideTop-ltr {
  100% {
    opacity: 0;
    transform: translateX(100%) scale(0);
  }
}
@-webkit-keyframes slideTop-rtl {
  100% {
    opacity: 0;
    transform: translateX(-100%) scale(0);
  }
}
@-moz-keyframes slideTop-ltr {
  100% {
    opacity: 0;
    transform: translateX(100%) scale(0);
  }
}
@-moz-keyframes slideTop-rtl {
  100% {
    opacity: 0;
    transform: translateX(-100%) scale(0);
  }
}

.fadeInScale {
  opacity: 0;
  transform: scale(0.8);
}

[dir=ltr] .fadeInScale {
  animation-name: fadeInScale;
  -webkit-animation-name: fadeInScale;
  -moz-animation-name: fadeInScale;
  -ms-animation-name: fadeInScale;
}

[dir=rtl] .fadeInScale {
  animation-name: fadeInScale;
  -webkit-animation-name: fadeInScale;
  -moz-animation-name: fadeInScale;
  -ms-animation-name: fadeInScale;
}
.zoomIn {
  opacity: 0;
  transform: scale(1.5);
}
[dir=ltr] .zoomIn {
  animation-name: fadeInScale;
  -webkit-animation-name: fadeInScale;
  -moz-animation-name: fadeInScale;
  -ms-animation-name: fadeInScale;
}
[dir=rtl] .zoomIn {
  animation-name: fadeInScale;
  -webkit-animation-name: fadeInScale;
  -moz-animation-name: fadeInScale;
  -ms-animation-name: fadeInScale;
}
@keyframes fadeInScale {
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes fadeInScale {
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeInScale {
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.slideUp {
  max-height: 0 ;
}

[dir=ltr] .slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -ms-animation-name: slideUp;
}

[dir=rtl] .slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -ms-animation-name: slideUp;
}
@keyframes slideUp {
  100% {
    max-height: 100vh ;
  }
}
@-webkit-keyframes slideUp {
  100% {
    max-height: 100vh ;
  }
}
@-moz-keyframes slideUp {
  100% {
    max-height: 100vh ;
  }
}

.slideDown {
  max-height: 100vh ;
}

[dir=ltr] .slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -ms-animation-name: slideDown;
}

[dir=rtl] .slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -ms-animation-name: slideDown;
}
@keyframes slideDown {
  100% {
    max-height: 0 ;
  }
}
@-webkit-keyframes slideDown {
  100% {
    max-height: 0 ;
  }
}
@-moz-keyframes slideDown {
  100% {
    max-height: 0 ;
  }
}

[dir=ltr] .navigate::before {
  animation-name: navigate;
  -webkit-animation-name: navigate;
  -moz-animation-name: navigate;
  -ms-animation-name: navigate;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
}

[dir=rtl] .navigate::before {
  animation-name: navigate;
  -webkit-animation-name: navigate;
  -moz-animation-name: navigate;
  -ms-animation-name: navigate;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
}
@keyframes navigate {
  100% {
    opacity: 0.03;
    transform: scale(4.6);
  }
}

@-webkit-keyframes navigate {
  100% {
    opacity: 0.03;
    -webkit-transform: scale(4.6);
  }
}

@-moz-keyframes navigate {
  100% {
    opacity: 0.03;
    -moz-transform: scale(4.6);
  }
}

.scaleIn {
  composes: modeForward;
  transform: scale(0);
}

[dir=ltr] .scaleIn {
  animation-name: scaleIn;
  -webkit-animation-name: scaleIn;
  -moz-animation-name: scaleIn;
  -ms-animation-name: scaleIn;
}

[dir=rtl] .scaleIn {
  animation-name: scaleIn;
  -webkit-animation-name: scaleIn;
  -moz-animation-name: scaleIn;
  -ms-animation-name: scaleIn;
}
@keyframes scaleIn {
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes scaleIn {
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes scaleIn {
  100% {
    transform: scale(1);
  }
}

.scaleOut {
  composes: modeForward;
  transform: scale(1);
}

[dir=ltr] .scaleOut {
  animation-name: scaleOut;
  -webkit-animation-name: scaleOut;
  -moz-animation-name: scaleOut;
  -ms-animation-name: scaleOut;
}

[dir=rtl] .scaleOut {
  animation-name: scaleOut;
  -webkit-animation-name: scaleOut;
  -moz-animation-name: scaleOut;
  -ms-animation-name: scaleOut;
}
@keyframes scaleOut {
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes scaleOut {
  100% {
    transform: scale(0);
  }
}
@-moz-keyframes scaleOut {
  100% {
    transform: scale(0);
  }
}

.flyDown {
  transform: translateY(-105%);
}

[dir=ltr] .flyDown {
  animation-name: flyDown;
  -webkit-animation-name: flyDown;
  -moz-animation-name: flyDown;
  -ms-animation-name: flyDown;
}

[dir=rtl] .flyDown {
  animation-name: flyDown;
  -webkit-animation-name: flyDown;
  -moz-animation-name: flyDown;
  -ms-animation-name: flyDown;
}
@keyframes flyDown {
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes flyDown {
  100% {
    transform: translateY(0%);
  }
}
@-moz-keyframes flyDown {
  100% {
    transform: translateY(0%);
  }
}

.flyUp {
  transform: translateY(0%);
}

[dir=ltr] .flyUp {
  animation-name: flyUp;
  -webkit-animation-name: flyUp;
  -moz-animation-name: flyUp;
  -ms-animation-name: flyUp;
}

[dir=rtl] .flyUp {
  animation-name: flyUp;
  -webkit-animation-name: flyUp;
  -moz-animation-name: flyUp;
  -ms-animation-name: flyUp;
}
@keyframes flyUp {
  100% {
    transform: translateY(-120%);
  }
}
@-webkit-keyframes flyUp {
  100% {
    transform: translateY(-120%);
  }
}

.bounceIn {
  composes: modeForward;
  transform: scale(0);
}

[dir=ltr] .bounceIn {
  animation-name: bounceIn;
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -ms-animation-name: bounceIn;
}

[dir=rtl] .bounceIn {
  animation-name: bounceIn;
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -ms-animation-name: bounceIn;
}
@keyframes bounceIn {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  20% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  40% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  60% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  80% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes bounceIn {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  20% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  40% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  60% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  80% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes bounceIn {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  20% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  40% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  60% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  80% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.zoomout {
  transition: transform var(--zd_transition5), opacity var(--zd_transition5);
  will-change: transform;
}

[dir=ltr] .zoomout {
  animation: Zoomout 500ms forwards;
}

[dir=rtl] .zoomout {
  animation: Zoomout 500ms forwards;
}
@keyframes Zoomout {
  0% {
    opacity: 0;
    transform: perspective(1px) scale(1.5) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: perspective(1px) scale(1) translateZ(0);
    will-change: transform;
  }
}