loading...
Cover image for Pure CSS messages which fade in and out

Pure CSS messages which fade in and out

rossangus profile image Ross Angus ・2 min read

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:

Part 1

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

Part 2

Message number 3 is delayed for twice as long:

Part 3

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.

Posted on by:

rossangus profile

Ross Angus

@rossangus

My interests are quirks of CSS, accessibility and "doing interesting things with old technology", apparently.

Discussion

markdown guide