/************ move ***************/
/* move-bottom-to-top */
.move-bottom-to-top-enter-active {
  animation: moveFromBottom 0.6s ease both;
}
.move-bottom-to-top-leave-active {
  animation: moveToTop 0.6s ease both;
}
@keyframes moveFromBottom {
  from {
    transform: translateY(100%);
  }
}
@keyframes moveToTop {
  to {
    transform: translateY(-100%);
  }
}

/* move-top-to-bottom */
.move-top-to-bottom-enter-active {
  animation: moveFromTop 0.6s ease both;
}
.move-top-to-bottom-leave-active {
  animation: moveToBottom 0.6s ease both;
}
@keyframes moveFromTop {
  from {
    transform: translateY(-100%);
  }
}
@keyframes moveToBottom {
  to {
    transform: translateY(100%);
  }
}

/* move-left-to-right */
.move-left-to-right-enter-active {
  animation: moveFromLeft 0.6s ease both;
}
.move-left-to-right-leave-active {
  animation: moveToRight 0.6s ease both;
}
@keyframes moveFromLeft {
  from {
    transform: translateX(-100%);
  }
}
@keyframes moveToRight {
  to {
    transform: translateX(100%);
  }
}

/* move-right-to-left */
.move-right-to-left-enter-active {
  animation: moveFromRight 0.6s ease both;
}
.move-right-to-left-leave-active {
  animation: moveToLeft 0.6s ease both;
}
@keyframes moveFromRight {
  from {
    transform: translateX(100%);
  }
}
@keyframes moveToLeft {
  to {
    transform: translateX(-100%);
  }
}

/* move-bottom-to-top */
.move-bottom-to-top-enter-active {
  animation: moveFromBottom 0.6s ease both;
}
.move-bottom-to-top-leave-active {
  animation: moveToTop 0.6s ease both;
}
@keyframes moveFromBottom {
  from {
    transform: translateY(100%);
  }
}
@keyframes moveToTop {
  to {
    transform: translateY(-100%);
  }
}

/* move-top-to-bottom */
.move-top-to-bottom-enter-active {
  animation: moveFromTop 0.6s ease both;
}
.move-top-to-bottom-leave-active {
  animation: moveToBottom 0.6s ease both;
}
@keyframes moveFromTop {
  from {
    transform: translateY(-100%);
  }
}
@keyframes moveToBottom {
  to {
    transform: translateY(100%);
  }
}

/* move-left-to-right */
.move-left-to-right-enter-active {
  animation: moveFromLeft 0.6s ease both;
}
.move-left-to-right-leave-active {
  animation: moveToRight 0.6s ease both;
}
@keyframes moveFromLeft {
  from {
    transform: translateX(-100%);
  }
}
@keyframes moveToRight {
  to {
    transform: translateX(100%);
  }
}

/* move-right-to-left */
.move-right-to-left-enter-active {
  animation: moveFromRight 0.6s ease both;
}
.move-right-to-left-leave-active {
  animation: moveToLeft 0.6s ease both;
}
@keyframes moveFromRight {
  from {
    transform: translateX(100%);
  }
}
@keyframes moveToLeft {
  to {
    transform: translateX(-100%);
  }
}

/************ move-fade ***************/
/* move-fade-bottom-to-top */
.move-fade-bottom-to-top-enter-active {
  animation: moveFadeFromBottom 0.7s ease both;
}
.move-fade-bottom-to-top-leave-active {
  animation: moveFadeToTop 0.7s ease both;
}
@keyframes moveFadeFromBottom {
  from {
    opacity: 0.3;
    transform: translateY(100%);
  }
}
@keyframes moveFadeToTop {
  to {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}

/* move-fade-top-to-bottom */
.move-fade-top-to-bottom-enter-active {
  animation: moveFadeFromTop 0.7s ease both;
}
.move-fade-top-to-bottom-leave-active {
  animation: moveFadeToBottom 0.7s ease both;
}
@keyframes moveFadeFromTop {
  from {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}
@keyframes moveFadeToBottom {
  to {
    opacity: 0.3;
    transform: translateY(100%);
  }
}

/* move-fade-left-to-right */
.move-fade-left-to-right-enter-active {
  animation: moveFadeFromLeft 0.7s ease both;
}
.move-fade-left-to-right-leave-active {
  animation: moveFadeToRight 0.7s ease both;
}
@keyframes moveFadeFromLeft {
  from {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}
@keyframes moveFadeToRight {
  to {
    opacity: 0.3;
    transform: translateX(100%);
  }
}

/* move-fade-right-to-left */
.move-fade-right-to-left-enter-active {
  animation: moveFadeFromRight 0.7s ease both;
}
.move-fade-right-to-left-leave-active {
  animation: moveFadeFromLeft 0.7s ease both;
}
@keyframes moveFadeFromRight {
  from {
    opacity: 0.3;
    transform: translateX(100%);
  }
}
@keyframes moveFadeFromLeft {
  to {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}

/* move-fade-bottom-to-top */
.move-fade-bottom-to-top-enter-active {
  animation: moveFadeFromBottom 0.7s ease both;
}
.move-fade-bottom-to-top-leave-active {
  animation: moveFadeToTop 0.7s ease both;
}
@keyframes moveFadeFromBottom {
  from {
    opacity: 0.3;
    transform: translateY(100%);
  }
}
@keyframes moveFadeToTop {
  to {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}

/* move-fade-top-to-bottom */
.move-fade-top-to-bottom-enter-active {
  animation: moveFadeFromTop 0.7s ease both;
}
.move-fade-top-to-bottom-leave-active {
  animation: moveFadeToBottom 0.7s ease both;
}
@keyframes moveFadeFromTop {
  from {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}
@keyframes moveFadeToBottom {
  to {
    opacity: 0.3;
    transform: translateY(100%);
  }
}

/* move-fade-left-to-right */
.move-fade-left-to-right-enter-active {
  animation: moveFadeFromLeft 0.7s ease both;
}
.move-fade-left-to-right-leave-active {
  animation: moveFadeToRight 0.7s ease both;
}
@keyframes moveFadeFromLeft {
  from {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}
@keyframes moveFadeToRight {
  to {
    opacity: 0.3;
    transform: translateX(100%);
  }
}

/* move-fade-right-to-left */
.move-fade-right-to-left-enter-active {
  animation: moveFadeFromRight 0.7s ease both;
}
.move-fade-right-to-left-leave-active {
  animation: moveFadeToLeft 0.6s ease both;
}
@keyframes moveFadeFromRight {
  from {
    opacity: 0.3;
    transform: translateX(100%);
  }
}
@keyframes moveFadeToLeft {
  to {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}

/************ move-different ***************/
/* move-different-bottom-to-top */
.move-different-bottom-to-top-enter-active {
  z-index: 1;
  animation: moveDifferentFromBottom 0.6s ease both;
}
.move-different-bottom-to-top-leave-active {
  z-index: 999;
  animation: moveDifferentToTop 0.7s ease-in-out both;
}
@keyframes moveDifferentFromBottom {
  from {
    transform: translateY(100%);
  }
}
@keyframes moveDifferentToTop {
  to {
    transform: translateY(-100%);
  }
}

/* move-different-top-to-bottom */
.move-different-top-to-bottom-enter-active {
  z-index: 1;
  animation: moveDifferentFromTop 0.6s ease both;
}
.move-different-top-to-bottom-leave-active {
  z-index: 999;
  animation: moveDifferentToBottom 0.7s ease-in-out both;
}
@keyframes moveDifferentFromTop {
  from {
    transform: translateY(-100%);
  }
}
@keyframes moveDifferentToBottom {
  to {
    transform: translateY(100%);
  }
}

/* move-different-left-to-right */
.move-different-left-to-right-enter-active {
  z-index: 1;
  animation: moveDifferentFromLeft 0.6s ease both;
}
.move-different-left-to-right-leave-active {
  z-index: 999;
  animation: moveDifferentToRight 0.7s ease-in-out both;
}
@keyframes moveDifferentFromLeft {
  from {
    transform: translateX(-100%);
  }
}
@keyframes moveDifferentToRight {
  to {
    transform: translateX(100%);
  }
}

/* move-different-right-to-left */
.move-different-right-to-left-enter-active {
  z-index: 1;
  animation: moveDifferentFromRight 0.6s ease both;
}
.move-different-right-to-left-leave-active {
  z-index: 999;
  animation: moveDifferentFromLeft 0.7s ease-in-out both;
}
@keyframes moveDifferentFromRight {
  from {
    transform: translateX(100%);
  }
}
@keyframes moveDifferentFromLeft {
  to {
    transform: translateX(-100%);
  }
}

/* move-different-bottom-to-top */
.move-different-bottom-to-top-enter-active {
  z-index: 1;
  animation: moveDifferentFromBottom 0.6s ease both;
}
.move-different-bottom-to-top-leave-active {
  z-index: 999;
  animation: moveDifferentToTop 0.7s ease-in-out both;
}
@keyframes moveDifferentFromBottom {
  from {
    transform: translateY(100%);
  }
}
@keyframes moveDifferentToTop {
  to {
    transform: translateY(-100%);
  }
}

/* move-different-top-to-bottom */
.move-different-top-to-bottom-enter-active {
  z-index: 1;
  animation: moveDifferentFromTop 0.6s ease both;
}
.move-different-top-to-bottom-leave-active {
  z-index: 999;
  animation: moveDifferentToBottom 0.7s ease-in-out both;
}
@keyframes moveDifferentFromTop {
  from {
    transform: translateY(-100%);
  }
}
@keyframes moveDifferentToBottom {
  to {
    transform: translateY(100%);
  }
}

/* move-different-left-to-right */
.move-different-left-to-right-enter-active {
  z-index: 1;
  animation: moveDifferentFromLeft 0.6s ease both;
}
.move-different-left-to-right-leave-active {
  z-index: 999;
  animation: moveDifferentToRight 0.7s ease-in-out both;
}
@keyframes moveDifferentFromLeft {
  from {
    transform: translateX(-100%);
  }
}
@keyframes moveDifferentToRight {
  to {
    transform: translateX(100%);
  }
}

/* move-different-right-to-left */
.move-different-right-to-left-enter-active {
  z-index: 1;
  animation: moveDifferentFromRight 0.6s ease both;
}
.move-different-right-to-left-leave-active {
  z-index: 999;
  animation: moveDifferentToLeft 0.7s ease-in-out both;
}
@keyframes moveDifferentFromRight {
  from {
    transform: translateX(100%);
  }
}
@keyframes moveDifferentToLeft {
  to {
    transform: translateX(-100%);
  }
}

/***************** scale *******************/
/* scale-down-to-down */
.scale-down-to-down-enter-active {
  animation: scaleUpDown 0.5s ease both;
  animation-delay: 0.3s;
}
.scale-down-to-down-leave-active {
  animation: scaleDown 0.7s ease both;
}
@keyframes scaleUpDown {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes scaleDown {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* scale-up-to-up */
.scale-up-to-up-enter-active {
  animation: scaleUp 0.7s ease both;
  animation-delay: 0.3s;
}
.scale-up-to-up-leave-active {
  animation: scaleDownUp 0.7s ease both;
}
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes scaleDownUp {
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* scale-down-to-up */
.scale-down-to-up-enter-active {
  animation: scaleUpCenter 0.4s ease-out both;
  animation-delay: 0.4s;
}
.scale-down-to-up-leave-active {
  animation: scaleDownCenter 0.4s ease-in both;
}
@keyframes scaleUpCenter {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes scaleDownCenter {
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}

/************ rotate-glue **************/
/* rotate-glue-bottom-to-top */
.rotate-glue-bottom-to-top-enter-active {
  z-index: 999;
  animation: moveFromBottom 0.6s ease both;
  animation-delay: 0.2s;
}
.rotate-glue-bottom-to-top-leave-active {
  z-index: 1;
  transform-origin: 50% 0%;
  animation: rotateBottomSideFirst 0.8s both ease-in;
}
@keyframes rotateBottomSideFirst {
  40% {
    transform: rotateX(-15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}

/* rotate-glue-top-to-bottom */
.rotate-glue-top-to-bottom-enter-active {
  z-index: 999;
  animation: moveFromTop 0.6s ease both;
  animation-delay: 0.2s;
}
.rotate-glue-top-to-bottom-leave-active {
  z-index: 1;
  transform-origin: 50% 100%;
  animation: rotateTopSideFirst 0.8s both ease-in;
}
@keyframes rotateTopSideFirst {
  40% {
    transform: rotateX(15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}

/* rotate-glue-left-to-right */
.rotate-glue-left-to-right-enter-active {
  z-index: 999;
  animation: moveFromLeft 0.6s ease both;
  animation-delay: 0.2s;
}
.rotate-glue-left-to-right-leave-active {
  z-index: 1;
  transform-origin: 100% 50%;
  animation: rotateLeftSideFirst 0.8s both ease-in;
}
@keyframes rotateLeftSideFirst {
  40% {
    transform: rotateY(-15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}

/* rotate-glue-right-to-left */
.rotate-glue-right-to-left-enter-active {
  z-index: 999;
  animation: moveFromRight 0.6s ease both;
  animation-delay: 0.2s;
}
.rotate-glue-right-to-left-leave-active {
  z-index: 1;
  transform-origin: 0% 50%;
  animation: rotateRightSideFirst 0.8s both ease-in;
}
@keyframes rotateRightSideFirst {
  40% {
    transform: rotateY(15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}

/********** rotate-flip ***********/
.rotate-flip-top-enter-active {
  transform-origin: 50% 50%;
  animation: flipInBottom 0.5s both ease-out;
  animation-delay: 0.5s;
}
.rotate-flip-top-leave-active {
  transform-origin: 50% 50%;
  animation: flipOutTop 0.5s both ease-in;
}
@keyframes flipInBottom {
  from {
    transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutTop {
  to {
    transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2;
  }
}

.rotate-flip-bottom-enter-active {
  transform-origin: 50% 50%;
  animation: flipInTop 0.5s both ease-out;
  animation-delay: 0.5s;
}
.rotate-flip-bottom-leave-active {
  transform-origin: 50% 50%;
  animation: flipOutBottom 0.5s both ease-in;
}
@keyframes flipInTop {
  from {
    transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutBottom {
  to {
    transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2;
  }
}

.rotate-flip-left-enter-active {
  transform-origin: 50% 50%;
  animation: flipInRight 0.5s both ease-out;
  animation-delay: 0.5s;
}
.rotate-flip-left-leave-active {
  transform-origin: 50% 50%;
  animation: flipOutLeft 0.5s both ease-in;
}
@keyframes flipInRight {
  from {
    transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutLeft {
  to {
    transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2;
  }
}

.rotate-flip-right-enter-active {
  transform-origin: 50% 50%;
  animation: flipInLeft 0.5s both ease-out;
  animation-delay: 0.5s;
}
.rotate-flip-right-leave-active {
  transform-origin: 50% 50%;
  animation: flipOutRight 0.5s both ease-in;
}
@keyframes flipInLeft {
  from {
    transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutRight {
  to {
    transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2;
  }
}

/*************** rotate-fall **************/
.rotate-fall-enter-active {
  z-index: 1;
  animation: scaleUp 0.7s ease both;
}
.rotate-fall-leave-active {
  z-index: 999;
  transform-origin: 0% 0%;
  animation: rotateFall 1s both ease-in;
}
@keyframes rotateFall {
  0% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(10deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: rotateZ(17deg);
  }
  60% {
    transform: rotateZ(16deg);
  }
  100% {
    transform: translateY(100%) rotateZ(17deg);
  }
}

/*************** rotate-sides **************/
.rotate-sides-enter-active {
  animation: rotateSlideIn 1s both ease;
}
.rotate-sides-leave-active {
  animation: rotateSlideOut 1s both ease;
}
@keyframes rotateSlideIn {
  0%,
  25% {
    opacity: 0.5;
    transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: 0.5;
    transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateX(0);
  }
}
@keyframes rotateSlideOut {
  25% {
    opacity: 0.5;
    transform: translateZ(-500px);
  }
  75% {
    opacity: 0.5;
    transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: 0.5;
    transform: translateZ(-500px) translateX(-200%);
  }
}

/*****************  rotate-push *********************/
.rotate-push-right-to-left-enter-active {
  transform-origin: 100% 50%;
  animation: rotatePullRight 0.5s both ease;
}
.rotate-push-right-to-left-leave-active {
  transform-origin: 0% 50%;
  animation: rotatePushLeft 0.8s both ease;
}
@keyframes rotatePullRight {
  from {
    opacity: 0;
    transform: rotateY(-90deg);
  }
}
@keyframes rotatePushLeft {
  to {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

.rotate-push-left-to-right-enter-active {
  transform-origin: 0% 50%;
  animation: rotatePullLeft 0.5s both ease;
}
.rotate-push-left-to-right-leave-active {
  transform-origin: 100% 50%;
  animation: rotatePushRight 0.8s both ease;
}
@keyframes rotatePullLeft {
  from {
    opacity: 0;
    transform: rotateY(90deg);
  }
}
@keyframes rotatePushRight {
  to {
    opacity: 0;
    transform: rotateY(-90deg);
  }
}

.rotate-push-top-to-bottom-enter-active {
  transform-origin: 50% 0%;
  animation: rotatePullTop 0.5s both ease;
}
.rotate-push-top-to-bottom-leave-active {
  transform-origin: 50% 100%;
  animation: rotatePushBottom 0.8s both ease;
}
@keyframes rotatePullTop {
  from {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}
@keyframes rotatePushBottom {
  to {
    opacity: 0;
    transform: rotateX(90deg);
  }
}

.rotate-push-bottom-to-top-enter-active {
  transform-origin: 50% 100%;
  animation: rotatePullBottom 0.5s both ease;
}
.rotate-push-bottom-to-top-leave-active {
  transform-origin: 50% 0%;
  animation: rotatePushTop 0.8s both ease;
}
@keyframes rotatePullBottom {
  from {
    opacity: 0;
    transform: rotateX(90deg);
  }
}
@keyframes rotatePushTop {
  to {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

/* rotate-fold */
.rotate-fold-bottom-to-top-enter-active {
  animation: moveFromBottomFade 0.7s ease both;
}
.rotate-fold-bottom-to-top-leave-active {
  transform-origin: 50% 100%;
  animation: rotateFoldTop 0.7s both ease;
}
@keyframes moveFromBottomFade {
  from {
    opacity: 0.3;
    transform: translateY(100%);
  }
}
@keyframes rotateFoldTop {
  to {
    opacity: 0;
    transform: translateY(-100%) rotateX(90deg);
  }
}

.rotate-fold-top-to-bottom-enter-active {
  animation: moveFromTopFade 0.7s ease both;
}
.rotate-fold-top-to-bottom-leave-active {
  transform-origin: 50% 0%;
  animation: rotateFoldBottom 0.7s both ease;
}
@keyframes moveFromTopFade {
  from {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}
@keyframes rotateFoldBottom {
  to {
    opacity: 0;
    transform: translateY(100%) rotateX(-90deg);
  }
}

.rotate-fold-left-to-right-enter-active {
  animation: moveFromLeftFade 0.7s ease both;
}
.rotate-fold-left-to-right-leave-active {
  transform-origin: 0% 50%;
  animation: rotateFoldRight 0.7s both ease;
}
@keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}
@keyframes rotateFoldRight {
  to {
    opacity: 0;
    transform: translateX(100%) rotateY(90deg);
  }
}

.rotate-fold-right-to-left-enter-active {
  animation: moveFromRightFade 0.7s ease both;
}
.rotate-fold-right-to-left-leave-active {
  transform-origin: 100% 50%;
  animation: rotateFoldLeft 0.7s both ease;
}
@keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    transform: translateX(100%);
  }
}
@keyframes rotateFoldLeft {
  to {
    opacity: 0;
    transform: translateX(-100%) rotateY(-90deg);
  }
}

/***************** rotate-carousel ****************/
.rotate-carousel-top-enter-active {
  transform-origin: 50% 0%;
  animation: rotateCarouselTopIn 0.8s both ease;
}
.rotate-carousel-top-leave-active {
  transform-origin: 50% 100%;
  animation: rotateCarouselTopOut 0.8s both ease;
}
@keyframes rotateCarouselTopIn {
  from {
    opacity: 0.3;
    transform: translateY(200%) scale(0.4) rotateX(-65deg);
  }
}
@keyframes rotateCarouselTopOut {
  to {
    opacity: 0.3;
    transform: translateY(-200%) scale(0.4) rotateX(65deg);
  }
}

.rotate-carousel-bottom-enter-active {
  transform-origin: 50% 100%;
  animation: rotateCarouselBottomIn 0.8s both ease;
}
.rotate-carousel-bottom-leave-active {
  transform-origin: 50% 0%;
  animation: rotateCarouselBottomOut 0.8s both ease;
}
@keyframes rotateCarouselBottomIn {
  from {
    opacity: 0.3;
    transform: translateY(-200%) scale(0.4) rotateX(65deg);
  }
}
@keyframes rotateCarouselBottomOut {
  to {
    opacity: 0.3;
    transform: translateY(200%) scale(0.4) rotateX(-65deg);
  }
}

.rotate-carousel-left-enter-active {
  transform-origin: 0% 50%;
  animation: rotateCarouselLeftIn 0.8s both ease;
}
.rotate-carousel-left-leave-active {
  transform-origin: 100% 50%;
  animation: rotateCarouselLeftOut 0.8s both ease;
}
@keyframes rotateCarouselLeftIn {
  from {
    opacity: 0.3;
    transform: translateX(200%) scale(0.4) rotateY(65deg);
  }
}
@keyframes rotateCarouselLeftOut {
  to {
    opacity: 0.3;
    transform: translateX(-150%) scale(0.4) rotateY(-65deg);
  }
}

.rotate-carousel-right-enter-active {
  transform-origin: 0% 50%;
  animation: rotateCarouselRightIn 0.8s both ease;
}
.rotate-carousel-right-leave-active {
  transform-origin: 100% 50%;
  animation: rotateCarouselRightOut 0.8s both ease;
}
@keyframes rotateCarouselRightIn {
  from {
    opacity: 0.3;
    transform: translateX(-150%) scale(0.4) rotateY(65deg);
  }
}
@keyframes rotateCarouselRightOut {
  to {
    opacity: 0.3;
    transform: translateX(200%) scale(0.4) rotateY(65deg);
  }
}
