Ionic animation in ionic 5 ion-list

I’m having trouble doing some simple animation with ionic v5. This is my html

<div *ngIf="products.length > 0">
  <ion-list *ngFor="let pro of products" class="list">
            // Making it simpler

And this is ts

ionViewDidEnter() {
    const animation = this.animationCtrl.create()
        { offset: 0, transform: 'translateY(-75px)', opacity: '0' },
        { offset: 0.3, transform: 'translateY(35px)', opacity: '0.5' },
        { offset: 1, transform: 'translateY(0px)', opacity: '1' }

Now the problem is when the page shows whole list items animate at once while I want to animate each ion-item one by one. If I use document.querySelector instead of document.querySelectorAll only first ion-item got animated.

Please any help will be appreciated.