trying to animate a group of cards using
display: grid
but the entrance feels way too robotic. i want each item to fade in with a slight delay so it looks more organic and fluid. ive been experimenting with
transition-delay
, but managing individual delays manually is such a
painful nightmare when the number of items changes dynamically.
>is there a cleaner way to handle this with css variables?i was thinking about using nth-child(n) of. card to loop through, but i cant figure out how to pass the index into a custom property without heavy javascript. has anyone found a trick for auto-staggering elements within a grid container? ❓