Animations not changing state using Angular 6.0.1 in Safari 11.1.1, specifically trying to change bottom property

Question

fab-menu.component.ts below with animation code

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from '@angular/animations';

@Component({
  selector: 'app-fab-menu',
  templateUrl: './fab-menu.component.html',
  styleUrls: ['./fab-menu.component.css'],
  animations: [
    trigger('labelState', [
      state('out', style({
        transform: 'scale(1, 1)',
        'transform-origin': '100% 0%'
      })),
      state('in', style({
        transform: 'scale(0,1)',
        'transform-origin': '100% 0%'
      })),
      transition('out => in', animate('100ms ease-in')),
      transition('in => out', animate('100ms ease-out'))
    ]),
    trigger('buttonRotationState', [
      state('rotated', style({
        transform: 'rotate(-45deg)',
        'transform-origin': '50% 50%'
      })),
      state('straight', style({
        transform: 'rotate(0deg)',
        'transform-origin': '50% 50%'
      })),
      transition('rotated => straight', animate('100ms ease-in')),
      transition('straight => rotated', animate('100ms ease-out'))
    ]),
    trigger('fabItem1State', [
      state('up', style({ 'bottom': '120px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem2State', [
      state('up', style({ 'bottom': '170px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem3State', [
      state('up', style({ 'bottom': '220px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem4State', [
      state('up', style({ 'bottom': '270px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem5State', [
      state('up', style({ 'bottom': '320px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ])
  ]
})

export class FabMenuComponent implements OnInit {
  public label_state = 'in';
  public fab_item_state = 'up';
  public menu_button_state = 'straight';
  @Input() buttonOneTitle;
  @Input() buttonTwoTitle  = '';
  @Input() buttonThreeTitle  = '';
  @Input() buttonFourTitle  = '';
  @Input() buttonFiveTitle  = '';

  @Output() clickedButton1: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton2: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton3: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton4: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton5: EventEmitter<number> = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  openMenu() {
    this.label_state = this.label_state === 'out' ? 'in' : 'out';
    this.menu_button_state = this.menu_button_state === 'rotated' ? 'straight' : 'rotated';
    console.log('expanding');
  }
  collapseItem($event) {
    this.fab_item_state = this.fab_item_state === 'up' ? 'down' : 'up';
    console.log('collapse');
  }

  button1Clicked() {
    this.clickedButton1.emit(1);
  }
  button2Clicked() {
    this.clickedButton2.emit(2);
  }
  button3Clicked() {
    this.clickedButton3.emit(3);
  }
  button4Clicked() {
    this.clickedButton4.emit(4);
  }
  button5Clicked() {
    this.clickedButton5.emit(5);
  }
}

more specifically the transitions aren't changing while using this code in Safari , though they are working properly in Chrome.

below is the html code.

<div class="fab-menu-body">
<div id="menu-item-one" class="menu-item" [@fabItem1State]="fab_item_state">
    <mat-label (@labelState.done)="collapseItem($event)" [@labelState]="label_state">{{buttonOneTitle}}</mat-label>
    <button id="menu-button-one" mat-mini-fab mat-icon-button (click)="button1Clicked(1)"></button>
</div>
<div id="menu-item-two" class="menu-item" [@fabItem2State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonTwoTitle}}</mat-label>
    <button id="menu-button-two" mat-mini-fab mat-icon-button (click)="button2Clicked(2)"></button>
</div>
<div id="menu-item-three" class="menu-item" [@fabItem3State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonThreeTitle}}</mat-label>
    <button id="menu-button-three" mat-mini-fab mat-icon-button (click)="button3Clicked(3)"></button>
</div>
<div id="menu-item-four" class="menu-item" [@fabItem4State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonFourTitle}}</mat-label>
    <button id="menu-button-four" mat-mini-fab mat-icon-button></button>
</div>
<div id="menu-item-five" class="menu-item" [@fabItem5State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonFiveTitle}}</mat-label>
    <button id="menu-button-five" mat-mini-fab mat-icon-button></button>
</div>
<div>
    <button [@buttonRotationState]='menu_button_state' id="menu-button" mat-fab aria-label="Menu" (click)='openMenu()'>
  <mat-icon>add</mat-icon>
</button>
</div>

Any help would be appreciated! Even though Angular 6 no longer required the web-animations-js, is that not accurate anymore? The menu items are supposed to jump up when the button is pressed and then return down when pressed again to "collapse the menu". Thanks in advance.