title: Angular - Crossfade between images
body: <p>I am trying to create a cross fade effect in Angular but the images keep pulsating instead of fading into each other. How can I fix it?</p>
  <p><strong>animations.ts</strong></p>
  <pre><code>import { trigger, style, animate, transition, state } from '@angular/animations';
  
  export const fade = [
    trigger('fade', [
      state('in', style({ 'opacity': '1' })),
      state('out', style({ 'opacity': '0' })),
      transition('* &lt;=&gt; *', [
        animate(500)
      ])
    ])
  ];
  
  export enum AnimationState {
    IN = 'in',
    OUT = 'out'
  }
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code>export class AppComponent implements OnInit {
    heroImageArray = [
      &quot;https://drscdn.500px.org/photo/277987267/q%3D80_m%3D2000/v2?webp=true&amp;sig=082269b7b07ec17da1847d5c20cffee3a3a91af1f474eb3fd908eba828d5327c&quot;,
      &quot;https://drscdn.500px.org/photo/253947845/q%3D80_h%3D450/v2?webp=true&amp;sig=c645b242f19581b17df5bc68d54ee4e5a3c2f5b1ddd41791683ed9c03c455151&quot;
    ];
    heroActiveImage: string =
      &quot;https://drscdn.500px.org/photo/277987267/q%3D80_m%3D2000/v2?webp=true&amp;sig=082269b7b07ec17da1847d5c20cffee3a3a91af1f474eb3fd908eba828d5327c&quot;;
    state = AnimationState.IN;
  
    ngOnInit() {
      this.toggleImg();
    }
  
    toggleImg() {
      let count = 0;
      setInterval(() =&gt; {
        if (count === this.heroImageArray.length) {
          count = 0;
        }
        this.heroActiveImage = this.heroImageArray[count];
        count++;
      }, 3000);
    }
  
    onDone() {
      this.toggleState();
    }
  
    toggleState() {
      this.state =
        this.state === AnimationState.IN ? AnimationState.OUT : AnimationState.IN;
    }
  }
  </code></pre>
  <p><strong>Stackblitz here:</strong> <a href="https://stackblitz.com/edit/angular-anim-fade-img-gga34g" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-anim-fade-img-gga34g</a></p>