How to add my content one by one with angular animation

For a presentation page I want to display the content of my page element by element with Angular animations

My goal was to make an animation that hides my content and make an animation for each element but my content is well hidden (:self) but the other animations have no effect until the end of the animation where all my content appears at once

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        query(':self',[
          style({opacity:0})
        ]),
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],

Solution

If your elements are the children of the :self, the child will not be displayed without the parent being visible.

Solution: first hide the children:

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        // hide elements that you do not want to display:
        query('#presentation h1', [
          style({opacity:0})
        ], { optional: true }),
        query('#presentation h2', [
          style({opacity:0})
        ], { optional: true }),
        query('#presentation p', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn1', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn2', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn3', [
          style({opacity:0})
        ], { optional: true }),

        // show them using transition animation:
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],