How to change Angular2 Material fab speed dial animation as in angular1

Question

I have Angular2 Material Fab Speed Dial, I need to do animation for that Angular2 in this format as in link Angular1 link. This is Angular1 animation part. Please suggest me to do same way in Angular2.

In the above link I need my code to work like md-scale Example.

I am here by sharing HTML code Angular2:

<div id="right-side" class="col-lg-1 col-md-1 col-sm-1 col-xs-1" layout="column">
  <button md-mini-fab class="md-fab md-raised md-primary" aria-label="New Task" (click)='FabToggle = !FabToggle'>
    <md-icon style="color:white;">menu</md-icon>
  </button>
  <div class="fab-actions" [ngClass]="{'fabActionsHide':!FabToggle,'fabActionsShow':FabToggle}">
    <button md-mini-fab class="md-fab md-raised md-primary" (click)='reload()'>
      <md-icon svgIcon="refresh"></md-icon>
    </button>
    <button md-mini-fab class="md-fab md-raised md-primary" (click)='DF()'>
      <md-icon svgIcon="pdf"></md-icon>
    </button>
    <button md-mini-fab class="md-fab md-raised md-primary" (click)='SV()'>
      <md-icon svgIcon="csv"></md-icon>
    </button>
    <button  md-mini-fab class="md-fab md-raised md-primary (click)="addModal.show()">
      <md-icon style="color:white;">add</md-icon>
    </button>
  </div>
</div>

CSS

.fab-actions button {
     margin-top: 8px;
    }

    #right-side button {
    background-color: #00bcd4 !important;
    height: 55px;
    width: 55px;
    font-size: 32px;
    }

    #right-side button:hover,
    #right-side button:focus {
    background-color: #000 !important;
    }

    .fab-actions button md-icon {
    height: 40px;
    width: 40px;
    }

    .fabActionsShow {
    opacity: 1;
    transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1);
    -webkit-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1);
    -moz-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1);
    -o-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1);
    -ms-transition: all 0.1ms cubic-bezier(0, 0.5, 0.75, 1);
    }

    .fabActionsHide {
    opacity: 0;
    transition: all 2.0s cubic-bezier(0, 0.5, 0.75, 1);
    -webkit-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1);
    -moz-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1);
    -o-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1);
    -ms-transition: all 1.2s cubic-bezier(0, 0.5, 0.75, 1);
    }

Answer 1

add this in CSS file for #right-side button

#right-side button {
background-color: #00bcd4 !important;
height: 55px;
width: 55px;
font-size: 32px;
transition: transform ease-out 0.5s;
transition-duration: 0.5s;

}

in HTML define id for your FAB buttons I have defined as menu1,menu2,menu3,menu4 and then add these in CSS

    .fabActionsHide #menu1 {
    animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
    transform: translate3d(0px, -30px, 0px);
}

.fabActionsHide #menu2 {
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: translate3d(0px, -60px, 0px);
}

.fabActionsHide #menu3 {
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    transform: translate3d(0px, -120px, 0px);
}

.fabActionsHide #menu4 {
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    transform: translate3d(0px, -180px, 0px);
}