Всем привет. Хочу сделать анимацию, что бы круги появлялись плавно

Question

Всем привет. Хочу сделать анимацию, что бы круги появлялись плавно

последовательно.
Написал такое

export const circle = trigger('circle', [
transition(':enter', [
query(':self', style({ visibility: 'hidden' }), { optional: true }),
sequence([
query(':self', [
style({ visibility: 'visible' }),
animate('500ms', style({ opacity: 0.2 }))
], { optional: true }),
query(':self', [
animate('750ms', style({ opacity: 0.4 }))
], { optional: true }),
query(':self', [
animate('1000ms', style({ opacity: 1 }))
], { optional: true })
])
])
]);
<div class="framer">
<div class="circle" [@circle]></div>
<div class="circle-two" [@circle]></div>
<div class="circle-three" [@circle]></div>
</div>

Но как-то да не так работает.
так же у каждого блока стоит opacity, их нужно убрать или как?) хэлпаните