Wow! Thank you so much bro. I really appreciate your comment.

Very neatly explained. My favorite part of CSS here is the nth-child(n) pseudo-class. It pains me that there is no quick, elegant way to fetch the n value and use it elsewhere in CSS. All we have is the user-defined variables. For instance, here's what I do:

div:nth-child(1) { --nth: 1; } / and so forth for all remaining children /

or, better yet

div:nth-child(1) { --step: 0; / a value that is n-1 - and indeed, it might be useful to list a value of 0, too / }

With that, you can now use animation-delay in the general div styling:

div { animation-delay: calc( 0.2s * var(--step) ); }

This way, if you decide you'd like the animation to be slower - and consequently, the delays to be longer - you just need to edit the general formula rather than the value for each child. This might seem like too much hassle for just three elements - but does come in handy when there are more. You can also use the --step/--n variable for other things, like:

background-color: hsl( calc( var(--step) 120deg ) 100% 50%); / 120deg being 1/3 of a full turn */