.box, .card {
  overflow: hidden;
}

.turun {
  -webkit-transition: 2.5s;
  transition: 2.5s;
  top: -999px;
  position: relative;
}

.swiper-slide-active .turun {
  top: 0;
}

.naik {
  -webkit-transition: top 2.5s;
  transition: top 2.5s;
  top: 999px;
  position: relative;
}

.swiper-slide-active .naik {
  top: 0;
}

.kekiri {
  -webkit-transition: right 2.5s;
  transition: right 2.5s;
  right: -999px;
  position: relative;
}

.swiper-slide-active .kekiri {
  right: 0;
}

.kekanan {
  -webkit-transition: left 2.5s;
  transition: left 2.5s;
  left: -999px;
  position: relative;
}

.swiper-slide-active .kekanan {
  left: 0;
}

.membesar {
  -webkit-transition: -webkit-transform 2.5s;
  transition: -webkit-transform 2.5s;
  transition: transform 2.5s;
  transition: transform 2.5s, -webkit-transform 2.5s;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.swiper-slide-active .membesar {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.muncul {
  -webkit-transition: opacity 1.9s;
  transition: opacity 1.9s;
  opacity: 0;
}

.swiper-slide-active .muncul {
  opacity: 1;
}

.melebar {
  -webkit-transition: max-width 1.9s;
  transition: max-width 1.9s;
  max-width: 0;
  overflow:hidden;
}

.swiper-slide-active .melebar {
  max-width: 500px;
}

:root {
  --animate-duration: 2.5s;
  --animate-delay: 2.5s;
  --animate-repeat: 1;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.animationSpin {
  -webkit-animation: spin 4s linear infinite;
          animation: spin 4s linear infinite;
}