Hacker News Reader

Comment by tanishqkanc | Hacker News Reader

Im not sure if there’s a good way to use css to animate an arbitrary number of children with a delay, while retaining clean markup. I did this before: .article-child { animation-delay: var(—index)*0.025s; } and while rendering, set style tags on each element style=“—index:5”, etc. That works, but it was annoying to maintain, and every single element has these style tags. So I just use Motion One (WAAPI) now.

View on HN

If you're willing to do some heavy copy-paste, there's always:

    @keyframes fdsseq { 
    100% { opacity: 1; }
    }

    #fds p {
    animation: fdsseq .5s forwards;
    }
    #fds p:nth-child(1) {
    animation-delay: .5s;
    }
    #fds p:nth-child(2) {
    animation-delay: 1s;
    }
    #fds p:nth-child(3) {
    animation-delay: 1.5s;
    }

Drop the animation and just let the browser render the elements and css position/style them. Most 'animations' on otherwise textual articles are merely eye-candy fluff that is totally unnecessary.

PS: Viewing with JS on -- yes, totally unnecessary eye-candy fluff in that animation.

But that’s my vibe!

I wouldn't want to live on an internet without a hint of personalization or eye-candy fluff :P

Reply on news.ycombinator.com