анимация карусельных текстов с угловой анимацией

Question

Я бы хотел оживить подписи карусели, когда они появятся. Я был в состоянии написать короткую анимацию. Анимация происходит только в первый раз, когда она обновляется, но при нажатии на индикаторы и она вращается. он больше не оживляет.

Мне нужна анимация, чтобы всегда запускаться всякий раз, когда любое изображение скользит в

"home.component.html"

<div class="row">
<div class="col-12 theSlide">
    <div id="demo" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="/assets/images/slide1.jpg" alt="slide1">
          <div class="carousel-caption slide1" @slideone>
            <h1>STROBOUCH</h1>
            <h4>We're the best in the field</h4>
            <h6> We Know what it takes to be the best, so we work hard to earn our keep </h6>
          </div>   
        </div>
        <div class="carousel-item">
          <img src="/assets/images/slide2.jpg" alt="slide2">
          <div class="carousel-caption">
            <h1>Chicago</h1>
            <h4>Thank you, Chicago!</h4>
          </div>   
        </div>
        <div class="carousel-item">
          <img src="/assets/images/slide3.jpg" alt="slide3">
          <div class="carousel-caption">
            <h1>New York</h1>
            <h4>We love the Big Apple!</h4>
          </div>   
        </div>
      </div>
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
</div>

"home.component.ts"

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
  trigger('slideone', [
    transition("void => *", [
      style({ 
        opacity: 0
      }),
      animate(500)
     ])
  ])
]
})
export class HomeComponent implements OnInit {



  constructor() { }

  ngOnInit() {
  }

}