Javascript 角度动画竞赛从左到右的外观，在视图上具有以下效果

我开始学习角度动画。但我有一个非常有趣的图像外观效果，你们可以在视频中看到

我不明白州与州之间需要指定什么样式。 你能帮我实现这个吗

更新

html

}

组成部分

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-creating-pulse',
  templateUrl: './creating-pulse.component.html',
  styleUrls: ['./creating-pulse.component.scss'],
  animations: [
    trigger('openClose', [
      state('open', style({
        // what property of css add?
        opacity: '0',
      })),
      state('closed', style({
        // what property of css add?
        opacity: '1'
      })),
      transition('* => closed', animate('4s')
      ),
    ]),
  ],
})
export class CreatingPulseComponent implements OnInit {
  openClose = 'open';

  constructor() { }

  ngOnInit() {
    this.openClose = 'closed';
  }

}

---

这只是一个从0%到100%的背景渐变。请先自己尝试一下，如果你卡住了，请包含一些代码。

.myblock{
width: 500px;
height: 700px;
margin: 5rem;

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-creating-pulse',
  templateUrl: './creating-pulse.component.html',
  styleUrls: ['./creating-pulse.component.scss'],
  animations: [
    trigger('openClose', [
      state('open', style({
        // what property of css add?
        opacity: '0',
      })),
      state('closed', style({
        // what property of css add?
        opacity: '1'
      })),
      transition('* => closed', animate('4s')
      ),
    ]),
  ],
})
export class CreatingPulseComponent implements OnInit {
  openClose = 'open';

  constructor() { }

  ngOnInit() {
    this.openClose = 'closed';
  }

}