Change color background slide white gradient IONIC 3

Ionic Framework ionic-v3
1

I would like to change the orange background to green, but with some animation, for example, when it is orange it will turn green.

If you can check out the two gifs I’ve assembled, you’ll understand what I mean.

HOW IT IS CURRENTLY -> GIF

HOW I WANT THEM TO BE -> GIF

HOME.HTML
``

<ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

``

2

See: https://docs.angularjs.org/api/ng/directive/ngStyle