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 }),
])
])
],

Continue reading...