How to set an animation to Nebular Stepper with Angular as Material does it

You just need to wrap the content of the nb-step.

On your component.html

<nb-stepper>
    <nb-step>
        <div class="wrap" [ngClass]="{'next': isNext, 'back':!isNext}">
        </div>
    </nb-step>
</nb-stepper>

On your component.ts

  next(event: MouseEvent) {
    this.isNext = true;
    if (this.stepper?.steps.length === this.stepper?.selectedIndex) {
      this.stepper?.reset();
    } else {
      this.stepper?.next();
    }
  }

  back(event: MouseEvent) {
    this.isNext = false;
    if (this.stepper?.selectedIndex === 0) {
      this.stepper.selectedIndex = this.stepper?.steps.length - 1;
    } else {
      this.stepper?.previous();
    }
  }

On your scss component.scss:

.wrap.back {
    animation-name: slideRightToLeft;
    animation-duration: 1s;
}

.wrap.next {
    animation-name: slideLeftToRight;
    animation-duration: 1s;
}

@keyframes slideLeftToRight {
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}