Change animations or transitions(Ionic 4)

Hey there,

I was wondering if i can change animation/ transition in ion-fab. Let me explain, you can have an ion-fab-list inside an ion-fab, so when you tap that ion-fab, the ion-fab-list makes a transition or animation to be showed.

It is possible to change that transition?


Sure, adapt it to your needs, here’s my example, put it somewhere into your styles:

@keyframes zoom-in {

    from {

        opacity: .5;
        transform: scale3d(.5, .5, .5);
    to {

       opacity: 1;


ion-fab[horizontal="end"][vertical="bottom"] {

	& ion-fab-list {

        animation: zoom-in .25s;



Hope it helps.