Animation for carousel with ng-boostrap and Angular 2

Here are two animations I used in Angular 9, ng-bootstrap version 6.0.0. Easiest way is to give an entrance animation to .carousel-item.active. Animations are taken from animista.net/play/entrances. Just make sure you add the css to global styles.css

Animation 1

.carousel-item.active {
    -webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes flip-in-ver-left {
    0% {
      -webkit-transform: rotateY(80deg);
              transform: rotateY(80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
    }
  }
  @keyframes flip-in-ver-left {
    0% {
      -webkit-transform: rotateY(80deg);
              transform: rotateY(80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
    }
  }

Animation 2

.carousel-item.active {
    -webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes tilt-in-fwd-tr {
    0% {
      -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
              transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
              transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
      opacity: 1;
    }
  }
  @keyframes tilt-in-fwd-tr {
    0% {
      -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
              transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
              transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
      opacity: 1;
    }
  }

I wanted a fade in/fade out the transition between slides and found a simpler solution to this:

::ng-deep {
  .carousel-item {
    transition: opacity 0.7s ease !important;
    position: absolute !important;
    display: block !important;
    opacity: 0;
  }

  .carousel-item.active {
    position: relative !important;
    opacity: 1;
  }
}

If you don't want to use ::ng-deep (it seems that is going to be deprecated, or at least I read so last week in angular.io) you can use a global styles file that will reach all classes in all components

I managed to create left-to-right slide animation based on your approach. active slide goes out with transition to the right when it loses .active and then new .active slides in with delayed animation.

though I recommend using ngx-swiper-wrapper instead - best angular carousel I found so far (https://idangero.us/swiper/)

.carousel-inner {
  width: 640px;
  height: 240px;
}

.carousel-item {
  padding: 40px 55px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block !important;
}

.carousel-item.active {
  z-index: 1;
  opacity: 1;
  transition-delay: .3s;
  transform: none;
  animation: slideFromLeft .3s;
  animation-delay: .3s;
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}

Alright, answering my own question. The following CSS hack will make the animation work just fine

ngb-carousel {
    width: inherit;
    height: inherit;
}


.carousel-inner {
    overflow: visible;
}

.carousel-item {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s;
    z-index: -1;
    position: absolute;
}

.carousel-item.active{
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.carousel-control-prev {
     z-index: 20;
}


.carousel-control-next {
     z-index: 20;
}

.carousel-indicators{
    z-index: 20;
}

Working Plunker