How to detect end of animation and start another using css/ SCSS | SASS | Angular

HTML-CSS
1

@for $i from 1 through 7 {
.myClassONE div:nth-child(#{$i}) {
animation-delay: #{$i * 0.5}s;
}
}

@for $i from 1 through 4 {
.myClassTWO div:nth-child(#{$i}) {
animation-delay: #{$i * 0.5}s;
}
}

I want to display 7 items in 0.5 seconds delay and then the 4 items start only after that. Currently the second set(.myClassTWO ) and (.myClassONE ) start at same time.

How to correct the code?

OR

Can I pass value of i in between ? Any other way?

Thanks… .