I'm not sure about you, but I'm a terrible user of Stack Overflow. What I mean is, I skim-read the question, flick down to the accepted answer, half scan it, then peek at the next one, if I don't find it satisfying. I'll often choose a lower rated answer because it makes sense to me.

Last week, I was rebuilding a simple message system where a series of strings fade in and out over time. This was nothing smart - the messages weren't being dynamically updated or appearing in different forms on different pages. So rather than looking at how it was currently done and replicating it, I figured I'd build it as a CSS animation.

I found a Stack Overflow answer which was close, but only worked if there was exactly two answers. So I built my own and it works, with the following limitations:

• You've got to know how many messages there are in advance
• If there's a different number of messages on a different page, well, you'll need a new chunk of CSS, buddy

I then spent some time refactoring it so the SCSS would generate out the code based on variables, rather than the hard-coded approach I'd taken on the site I built it for. Except I couldn't find the original Stack Overflow ticket. So I guess I'll just leave it here and hope it's useful to someone?

Let's say we're showing three different messages. Here's what happens to message number one:

Message number two uses exactly the same animation, but it's delayed by the same length as it takes message number 1 to play:

Message number 3 is delayed for twice as long:

I'm indebted to Nick Watton for helping me figure out the animation timings. He is the Henry David Thoreau of web devs, in that he works in a shed.