How to add n-th child class using *ngFor with ionic,angular2


I have an array for product. I am displaying product with grid view.

Here is my code

<ion-row *ngFor="let i of rows" #myElem>
        <ion-col class="productlist" col-6 *ngFor="let p of product | slice:(i*2):(i+1)*2" (click)="nav(" > 
            <div class="product-image">
                <img src="{{p.details.P_IMAGES[0].URL}}" alt="Product 1">

            <div class="product-blk">   
                <div class="product-title">{{p.details.P_TITLE}}</div>
                <div class="product-price">
                    <img src="./assets/images/rupee-yellow.svg" alt="Rupee">{{p.details.PRICE_SALE}}
                <div class="product-desc">

Here is my css.

                     animation: FadeIn 1s linear;
                     animation-fill-mode: both;
                     animation-delay: .5s

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);

  85% {
    opacity: 1;
    transform: scale(1.05);
  100% {
    transform: scale(1);

It works perfect. I need to set animation delay on each grid. I need custom CSS class like this


So i tried for loop in scss:

@for $i from 1 through 4 {
animation-delay: $i * 1000;

But it’s not work.
How can i do this?

Kindly advice me,