如何创建带有角度的褪色背景图像？

Question

我希望有一个通过淡入淡出在图像中旋转的div。我想使用Angular的动画库来做到这一点。我现在所拥有的什么都没有显示。

我尝试按照https://angular.io/guide/animations上的教程进行操作。

HTML

  <div id = slider [@slidingPictures] ="currentSlidingPictureState" >
    <p>{{currentSlidingPictureState}}</p>
  </div>

CSS

slider {
    height: 30%;
    background: greenyellow;
}

打字稿

import { Component, HostBinding, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
    trigger('slidingPictures',[
      state('picture1',style({
        background: 'url("../assets/images/game1.jpg")'
      })),
      state('picture2',style({
        background: 'url("../assets/images/game2.png")'
      })),
      state('picture3',style({
        background: 'url("../assets/images/game3.jpg")'
      })),
      transition('picture1 => picture2',[
        animate('1s')
      ]),
      transition('picture2 => picture3',[
        animate('1s')
      ]),
      transition('picture3 => picture1',[
        animate('1s')
      ]),
    ]),
  ]
})
export class HomeComponent implements OnInit {

  slidingPictureStates:Number[] = [1,2,3];
  currentSlidingPictureState:Number;
  constructor() { }

  ngOnInit() {
    this.currentSlidingPictureState = 1;
  }

}