Angular Animation trigger works but without animation

I'm having some issues while doing expand and shrink operation on a component. The trigger works. Thus, the new styles are applied correctly.

The only problem is that there is no animations.

Browser: Google Chrome OS: Ubuntu 22.04

  animations: [
    trigger("expandShrink", [
      state("expanded", style({
        minWidth: "360px",
        width: "360px",
        // backgroundColor: "red"
      })),
      state("shrinked", style({
        minWidth: "40px",
        width: "40px",
        // backgroundColor: "blue"
      })),
      transition("expanded <=> shrink", [
        animate("3s ease-in")
      ]),
    ])
  ]

  @HostBinding("@expandShrink") get expandShrink() {
    return this.expanded ? 'expanded' : 'shrinked';
  }