How do I fade in ion-list content?

Kia Ora, I am trying to find a way to fade in a card and fade out cards as the user scrolls through the ion-list so that when they have a card that is fully in the window it will be perfectly clear but as they swipe it up it will either grey out or fade out. Thank you!


      <ion-item style="background-color: #f0f4f9; padding:0 !important; margin-top: 0; " *ngFor="let item of cards">
        <div style="width: 100%; height:400px; border-radius: 25px; margin-bottom: 20px; "
          [ngStyle]="{'background':'url('+ item.image +')','background-size':'100% auto'} ">
            <ion-item style="margin-top:calc(100% - 50px); padding-left: 10px; width:100%"
                <h1 text-start>{{}} , <span>{{item.age}}</span></h1>
                <div class="sameLineContent">
                  <ion-icon slot="start" name="snow" expand="icon-only" mode="ios"></ion-icon>
                  <p text-start>{{item.occupation}}</p>
                <div class="sameLineContent">
                  <ion-icon slot="start" name="pin" expand="icon-only" mode="ios"></ion-icon>
                  <p text-start>{{item.distance}}</p>
              <ion-icon name="information-circle" slot="end" expand="icon-only" color="light" class="info"></ion-icon>

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">


.stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .finalcard {
    width: calc(100% - 21px);
    height: calc(100% - 30px);
    border-radius: 10px;
    margin: 0px;
    // box-shadow: 1px 1px 0px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    background-position: center !important;

    .itemdiv {
      width: 100%;
      height: calc(100% - 0px);
      background: rgba(30, 32, 35, 0.14);
      display: flex;
      align-items: flex-end;
      border-radius: 10px;
      ion-item {
        padding: 10px;
        width: 100%;

Source: AngularJS Questions