<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css">

<section class="cards">
  <div class="owl-wrapper">
    <div class="loop owl-carousel owl-theme">
      
      <article class="card">
        <div class="card__content">
          <h4 class="card__title"><span>Card One</span></h4>
        </div>
      </article>
      
      <article class="card">
        <div class="card__content">
          <h4 class="card__title"><span>Card Two</span></h4>
        </div>
      </article>
      
      <article class="card">
        <div class="card__content">
          <h4 class="card__title"><span>Card Three</span></h4>
        </div>
      </article>
      
      <article class="card">
        <div class="card__content">
          <h4 class="card__title"><span>Card Four</span></h4>
        </div>
      </article>
    </div>
  </div>
</section>

body,
html {
  font-family: 'Poppins';
  margin: 0;
  padding: 0;
}


.card, .owl-item{
  transition: all 1s ease-out;
  -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.owl-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.cards{
  position: relative;
  height: 100vh;
  width: 100%;
  padding: 4em 0;
  background-color: #fefefe;
}

.card{
  display:flex;
  justify-content: center;
  height: 19em;
  padding: 1em;
  margin: 1em 0;
  border-radius: 4px;
  opacity: 0.7;
  transform: scale(0.87);
  transition: transform 0.4s 0.5s ease-out, opacity 1s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  
  .active &{
    box-shadow: 0 0px 1em rgba(0, 0, 0, 0.2);
    transform: box-shadow 0.3s ease, transform 0.1s 0.4s ease-in, opacity 0.4s ease;
  }
  
  &__content{
    display: flex;
    align-items: center;
    text-align:center;
    color: #fff;
    opacity:1;
    
    .active &{
      opacity: 1;
      transition:opacity 0.4s ease;
    }
  }
  
  &__title{
    display:inline-block;
    font-size: 2em;
    overflow:hidden;
    
    span{
      display:inline-block;
      //opacity: 0;
      //transform: translate3d(0,-110%,0);
      //transition: transform 0.4s ease, opacity 0.4s ease;
      animation: slide-up 0.4s 0s ease both;
   
    .center.active &, .center.active.cloned:last-child &{
      opacity: 1;
      animation: slide-down 0.4s 0.4s ease both;
      //transform: translate3d(0,0,0);
      transition: transform 0.3s 0.4s ease, opacity 0.3s ease;
    }
  }
  }
  .center &{
    opacity: 1;
    transform: scale(1);
      &:hover {
        box-shadow: 0 8px 16px -5px rgba(0, 0, 0, 0.4);
      }
  }

}

.owl-item:nth-of-type(1n) .card{
  background-color: #ff527b;
}

.owl-item:nth-of-type(2n) .card{
  background-color: #ffcc8f;
}

.owl-item:nth-of-type(3n) .card{
  background-color: #ff8f2f;
}

.owl-item:nth-of-type(4n) .card{
  background-color: #2480fe;
}

.owl-theme .owl-dots .owl-dot span {
    width: 4em;
    height: 4px;
    margin: 0 0.5em;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 0;
}

.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    background: #ff527b;
}



@keyframes slide-down{
  0%{
    opacity: 0;
    transform: translate3d(0,-120%,0);
  }
  
  100%{
    opacity: 1;
    transform: translate3d(0,0%,0);
  }
}


@keyframes slide-up{
  0%{
    opacity: 1;
    transform: translate3d(0,0%,0);
  }
  
  100%{
    opacity: 0;
    transform: translate3d(0,-120%,0);
  }
}

var $owl = $('.loop');
  
$owl.owlCarousel({
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 3000,
    autoplaySpeed: 800,
    center: true,
    items: 1.4,
    stagePadding: 15,
    loop: true,
    margin: 15,
  animateOut: 'slide-up',
animateIn: 'slide-down',
});