Use nth-child as CSS variable

Please remember that you can assign variables in CSS too.

:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }

Then you can apply it like this:

animation: fade-in calc(var(--nth-child) * 1s) 1s forwards;

And here come some demo.