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 */