Angular-animation the appearance of the contest from left to right with the following effect on the view

Question

I started to learn angular animation. but I have a very interesting effect of the appearance of the image.You can see it on video https://youtu.be/iqa4R8PE6zo.

I can’t understand what styles between states need to be specified. Can you help me with this implementation

Updated

html

<img [@openClose]="openClose" class="myblock" src="../../../../assets/images/Beat_create_2.jpeg" />

scss

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

}

Component

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';
  }

}