Angular: stany wbudowane animacji nie dzialaja

PROBLEM ROZWIAZANY, wytlumaczenie pod koniec:

Chcialbym za pomoca animacji w Angularze miec dzialajace przejscie ze stanu wbudowanego void do * (void => *) i odwrotne, * do void (* => void) czyli inaczej :enter i :leave. Dopoki mam zdefiniowane dwa stany bez wbudowanych, wszystko dziala dobrze i czasy animacji tez sa poprawne, nawet w Chrome DevTools Animation Inspector wykrywa mi te animacje. Oto kod:

import { trigger, style, state, transition, animate } from "@angular/core";
export const PodswietlWyzwalacz = trigger("rzadPodkresl", [
  state("selected", style({
    backgroundColor: "lightgreen",
    fontSize: "30px"
  })),
  state("notselected", style({
    backgroundColor: "lightsalmon",
    fontSize: "22px"
  }))
  transition("selected => notselected", animate("2000ms")),
  transition("notselected => selected", animate("4000ms 2000ms ease-in"))
  
]);

Natomiast gdy dodaje przejscia animacji uwzgledniajac stany wbudowane, efekt jest taki, ze dla moich stanow(notselected i selected) animacje dzialaja, ale nie zgadza sie ich czas trwania i nie dzialaja w ogole pozostale animacje(przejscia uwzgledniajace stany wbudowane) i nie wykrywa w inspektorze zadnych animacji. Szukalem juz sporo w Internecie i ciezko mi odgadnac dlaczego to nie dziala. Oto kod ze stanami wbudowanymi:

import { trigger, style, state, transition, animate } from "@angular/core";

export const PodswietlWyzwalacz = trigger("rzadPodkresl", [
  state("selected", style({
    backgroundColor: "lightgreen",
    fontSize: "30px"
  })),
  state("notselected", style({
    backgroundColor: "lightsalmon",
    fontSize: "22px"
  })),
  state("*", style({
    border: "solid black 2px"
  })),
  state("void", style({
    opacity: 0
  })),
  transition("void => * , * => void", animate("5000ms")),
  transition("selected => notselected", animate("2000ms")),
  transition("notselected => selected", animate("4000ms 2000ms ease-in")),
  transition("* => notselected", animate("2000ms")),
  transition("* => selected", animate("4000ms")),
  transition("selected => *", animate("2000ms")),
  transition("notselected => *", animate("4000ms"))
  
]);

Bylbym wdzieczny za wskazanie co jest zle i jak to naprawic, bo juz nie mam pomyslu.

ROZWIAZANIE PROBLEMU:

Udalo mi sie troche zmienionym podejsciem uruchomic stany wbudowane. Kody wyzsze wzbogacilem o wlasciwosc definiowania stylu ostatecznego jako drugi parametr w animate, np. :

transition("notselected => selected", animate("4000ms 2000ms linear",
    style({
      backgroundColor: "lightgreen",
      fontSize: "30px"
    }))),

Wskazowki: jesli jedna wlasciwosc "ostateczna" jest juz zdefiniowana w stylu stanu wbudowanego, to nie nalezy jej dublowac wewnatrz drugiego parametru animate. Konsola sie nie skarzy, ale po prostu wtedy to nie dziala.
Dodatkowo jesli definiujemy zmiane jednej wlasciwosci z jednego stylu do drugiego, to musi byc jasno zaznaczone z ktorej na ktora. Ja mialem przejscie z opacity: 0 do opacity: 1, ale myslalem, ze domyslnie jest opacity: 1 i tego nie zaznaczylem, wiec poczatkowo nie dzialalo, dopiero doprecyzowanie pomoglo.