As noted, Valve uses the same flicker effect for broken lights in all their games. What if I want a broken web page?

First thing is to head over to the quake source and examine the magic string, “mmamammmmammamamaaamammma”. Mama! I like the string encoded sequences. We’ll save this for later.

CSS animation syntax always confuses me, as do the many seemingly redundant properties. Just like everything else in CSS. But the idea is we will animate between fixed keyframes. The original flicker effect lasts for 2.3 seconds, but I’m going to bump it to 2.5s to make the math work out a little better. We want the animation to loop endlessly, because nobody’s coming to replace the lights in our web apocalypse. And crucially, we want the effect to jump between keyframes without interpolation. (I think I got this one right, although I am unable to explain how the MDN documentation relates to the observed effect.)

behold

Well, look at that. I’m animating based on opacity to avoid fussing with coordinating color values.

I spent some time trying to synchronize with the original effect, but never got it quite right. Something is off with the timing (even before I changed it to 2.5s), and I don’t want to learn enough to fix it, which is why there’s no valve.gif linked here. But without the direct comparison, I think it’s close enough for a gimmick. There’s no doubt some ancient lore regarding browser paint coalescing I’m missing.

Here’s the actual keyframe data I’m using. Adapted from mama.

You can try to kill the blink tag, but it will only come back stronger.