I'm trying to flip de card with animation but it only flips instantaneously, can not see the transition.

My HTML:

<div class="tp-wrapper">
    <div class="tp-box" (click)="toggleFlip()" [@flipAnimation]="flipState">
        <div class="tp-box__side tp-box__front">
      <img class = "foto" src='src'>
        </div>
        <div class="tp-box__side tp-box__back">name
        </div>
    </div>
</div>

TypeScript:

import { Partida, Prueba } from './../../../utils/models/PartidaModel';
import { Component, Input, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { constants } from 'src/app/utils/constants';


@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations: [
    trigger('flipAnimation', [
      state('active', style({
        transform: 'rotateY(179deg)'
      })),
      state('inactive', style({
        transform: 'rotateY(0)'
      })),
      transition('active => inactive',[ animate('1000ms ease-out')]),
      transition('inactive => active',[ animate('1000ms ease-in')])
    ])
  ]
})
export class CardComponent implements OnInit {

  @Input() prueba : Prueba;
  @Input() partida : Partida;
  flipState: string = 'inactive' ;


  constructor() { }

  ngOnInit() {
    console.log(this.prueba);
  }


  toggleFlip() {
    this.flipState = (this.flipState == 'inactive') ? 'active' : 'inactive';
  }

When clicking on the card I am able to see the back face of the card, but I want to see how it turns over using the Angular Transition