I’m new to Angular animations and couldn’t figure out why this won’t apply the child elements. Anyone help would be appreciated.

const fadeInStagger = trigger('fadeInStagger', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0, transform: 'translateY(-20px)' }),
      stagger('200ms', [
        style({ opacity: 0, transform: 'translateY(-20px)' }),
        animate('1s ease-in', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ], { optional: true })
  ])
]);

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [fadeInStagger],
})
export class HomeComponent implements OnInit {
  stateService = inject(StateService);

  constructor() {}

  ngOnInit(): void {
    this.stateService.resetState();
    localStorage.clear();
  }
}

<div @fadeInStagger class="my-10 flex flex-col items-center justify-center gap-6">
    <h1 class="">Welcome!</h1>
    <p class="subtitle">Click on the button below to start the challenge!</p>
    <div class="mt-2">
        <a [routerLink]="['/captcha']" class="home-button btn text-lg">Start</a>
    </div>
</div>

I tried to animate so each child element would ease in staggered. Nothing happens with this code