Угловая анимация переворачивает div дважды. Как это исправить?

Question

Я создал анимацию с использованием угловых. Это в основном переворачивает div. Он отлично работает в браузере Chrome, но когда я пытаюсь запустить его в последнем браузере Safari и Firefox, он переворачивает div дважды, а не один раз. Как я могу исправить эту проблему?

@Component({
  selector: 'app-card',
  templateUrl: './app-card.component.html',
  styleUrls: ['./app-card.component.scss'],
  animations: [
    trigger('flipState', [
      state(FlipState.ACTIVE, style({
          transform: 'rotateY(180deg)'
        })
      ),
      state(FlipState.INACTIVE, style({
          transform: 'rotateY(0)'
        })
      ),
      transition(FlipState.ACTIVE + ' => ' + FlipState.INACTIVE, animate('200ms ease-in')),
      transition(FlipState.INACTIVE + ' => ' + FlipState.ACTIVE, animate('200ms ease-in'))
    ])
  ]
})

Это код для анимации, которую я использовал, и в OnInit есть одна подписка на наблюдаемые, в зависимости от которой изменяется это состояние анимации.