Broken animation with stagger, group and sequence

Description and bug walk-through available on Stackblitz (see Project>INFO)

Goal

Given the following template:

div 1 and div 2 stacked in a parent div

Animate the following sequence for the parent div's DOM entrance:

• 100 ms from each other, the children div:
  • Step 1: go from dark cyan to light green (1 s)
  • Step 2: flash in light blue (250 ms)

Constraint

The blue flash implementation must be nested in a group()

Suggested implementation

animations: [
// parent animation
trigger('stagger', [
  transition(':enter', [
    query('@color', [stagger(100, [animateChild()])]),
  ]),
]),

// children animation
trigger('color', [
  transition(':enter', [
    style({
      'background-color': 'darkcyan',
    }),
    animate(
      '1s ease-out',
      style({
        'background-color': 'lightgreen',
      })
    ),
    group([
      sequence([
        animate(
          '125ms',
          style({
            'background-color': 'cyan',
          })
        ),
        animate(
          '125ms',
          style({
            'background-color': 'inherit',
          })
        ),
      ]),
    ]),
  ]),
]),
]

Bug

Step 1 does not work. The color is stuck on the end color (light green) during the whole step.

It works correctly when

• The constraint is ignored (the flash sequence is written directly, no group/sequence).
• The parent animation is removed and the children animations are run simultaneously
• The flash targets the text color instead of the background color

My thoughts

I have no idea what's going on. Help?