@zohodesk/components 1.0.0-temp-107 → 1.0.0-temp-108

package/es/common/animation.module.css

@@ -1,426 +1,624 @@
-.modeForward {
-  animation-fill-mode: forwards;
-  -webkit-animation-fill-mode: forwards;
-  -ms-animation-fill-mode: forwards;
-  -moz-animation-fill-mode: forwards;
-}
-.infinite {
-  animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-  -webkit-animation-iteration-count: infinite;
-  -ms-animation-iteration-count: infinite;
-}
-.both {
-  animation-fill-mode: both;
-  -webkit-animation-fill-mode: both;
-  -ms-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-}
-.fadeIn {
-  opacity: 0;
-  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;
-  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);
-  animation-name: slideRight;
-  -webkit-animation-name: slideRight;
-  -moz-animation-name: slideRight;
-  -ms-animation-name: slideRight;
-}
-@keyframes slideRight {
-  100% {
-    opacity: 0;
-    transform: translateX(110%) scale(0);
-  }
-}
-@-webkit-keyframes slideRight {
-  100% {
-    opacity: 0;
-    transform: translateX(110%) scale(0);
-  }
-}
-@-moz-keyframes slideRight {
-  100% {
-    opacity: 0;
-    transform: translateX(110%) scale(0);
-  }
-}
-
-.slideTop {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  animation-name: slideTop;
-  -webkit-animation-name: slideTop;
-  -moz-animation-name: slideTop;
-  -ms-animation-name: slideTop;
-}
-@keyframes slideTop {
-  100% {
-    opacity: 0;
-    transform: translateX(100%) scale(0);
-  }
-}
-@-webkit-keyframes slideTop {
-  100% {
-    opacity: 0;
-    transform: translateX(100%) scale(0);
-  }
-}
-@-moz-keyframes slideTop {
-  100% {
-    opacity: 0;
-    transform: translateX(100%) scale(0);
-  }
-}
-
-.fadeInScale {
-  opacity: 0;
-  transform: scale(0.8);
-  animation-name: fadeInScale;
-  -webkit-animation-name: fadeInScale;
-  -moz-animation-name: fadeInScale;
-  -ms-animation-name: fadeInScale;
-}
-.zoomIn {
-  opacity: 0;
-  transform: scale(1.5);
-  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;
-  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;
-  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;
-  }
-}
-
-.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 {
-  transform: scale(0);
-  animation-name: scaleIn;
-  -webkit-animation-name: scaleIn;
-  -moz-animation-name: scaleIn;
-  -ms-animation-name: scaleIn;
-  composes: modeForward;
-}
-@keyframes scaleIn {
-  100% {
-    transform: scale(1);
-  }
-}
-@-webkit-keyframes scaleIn {
-  100% {
-    transform: scale(1);
-  }
-}
-@-moz-keyframes scaleIn {
-  100% {
-    transform: scale(1);
-  }
-}
-
-.scaleOut {
-  transform: scale(1);
-  animation-name: scaleOut;
-  -webkit-animation-name: scaleOut;
-  -moz-animation-name: scaleOut;
-  -ms-animation-name: scaleOut;
-  composes: modeForward;
-}
-@keyframes scaleOut {
-  100% {
-    transform: scale(0);
-  }
-}
-@-webkit-keyframes scaleOut {
-  100% {
-    transform: scale(0);
-  }
-}
-@-moz-keyframes scaleOut {
-  100% {
-    transform: scale(0);
-  }
-}
-
-.flyDown {
-  transform: translateY(-105%);
-  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%);
-  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 {
-  transform: scale(0);
-  animation-name: bounceIn;
-  -webkit-animation-name: bounceIn;
-  -moz-animation-name: bounceIn;
-  -ms-animation-name: bounceIn;
-  composes: modeForward;
-}
-@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;
-  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;
-  }
-}
+[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;
+  }
+}