Использование Angular анимации для слайдера изображений

Question

Я пытаюсь использовать анимацию angular для создания слайдера изображений, и изображения меняются так, как я хочу. Но проблема в том, что изменение происходит очень быстро (внезапное изменение изображения), и я хотел бы сделать его медленнее, как если бы изображение имело место в предыдущем. (Я не знаю много о jquery и анимациях)

мой код:

ts:

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  transition,
  query,
  style,
  animate,
  group
} from "@angular/animations";

@Component({
  selector: 'app-slider',
  animations: [
    trigger("slider", [
      transition(
        ":increment",
        group([
          query(":enter", [
            style({
              left: "100%"
            }),
            animate("0.5s ease-out", style("*")) //I also tried changing the time and nothing changed
          ]),
          query(":leave", [
            animate(
              "0.5s ease-out",
              style({
                left: "-100%"
              })
            )
          ])
        ])
      ),
      transition(
        ":decrement",
        group([
          query(":enter", [
            style({
              left: "-100%"
            }),
            animate("0.5s ease-out", style("*"))
          ]),
          query(":leave", [
            animate(
              "0.5s ease-out",
              style({
                left: "100%"
              })
            )
          ])
        ])
      )
    ])
  ],
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
  recImage:any

  //to store the images
  private _images: string[] = [];
  //used for navigating between the images
  selectedIndex: number = 0;
  //to store the main image
  MainImage: any;
  constructor() { }

  ngOnInit() {
    this._images = ["../../../../assets/MAIN.jpg","../../../../assets/d7d25-a.jpg","../../../../assets/MAIN.jpg"];


  }
  ngAfterViewInit(){
    setInterval(() => {
      this.next()
    }, 3000);
  }

  get images() {
    return [this._images[this.selectedIndex]];
  }
  //to go to previous image
  previous() {
    this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
  }
  //to go to next image
  next() {
    if(this.selectedIndex == this._images.length - 1){
      this.selectedIndex = 0
    }
    this.selectedIndex = Math.min(
      this.selectedIndex + 1,
      this._images.length - 1
    );
  }
}

html:

<section class="sizing-slider">
    <section  class="bg-image" style="margin-top:-20px"> // I need these 2 sections for design purposes
         <div class="slide" [@slider]="selectedIndex" style="text-align: center;  justify-content: center;" *ngFor="let image of images">
            <img [src]="image" style="width:100%;" class="slidedown" />
            </div> 
      </section>
    </section>

Пожалуйста, помогите мне сделать так, чтобы смена изображений выглядела лучше (возможно, выцветание или медленная замена). Спасибо.