4 ms·
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
by tanishqkanc 4y ago
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.
- pwg 4y agoDrop 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.
- tanishqkanc 4y agoBut that’s my vibe!
- ChadNauseam 4y agoI wouldn't want to live on an internet without a hint of personalization or eye-candy fluff :P
- ChadNauseam 4y agoIf 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; }