here's eggbug on their journey through life :3
Apologies to firefox people, it flashes a lot there, and i don't know what to do about that!
I'll try to explain how this works.
This is 80 <pre> elements, each is a single frame for the animation.
To show/hide each frame, I'm translating them off the side of the page
out of view, using @keyframes spin:
position: absolute;
top: 0px;
left: 100000px;
transform: translate(-100000px);
animation: 8000ms steps(80) -7500ms infinite normal none running spin;
I borrowed the idea for the translate() here from @ubuntor's post on
approximating arbitrary motions using spin
but instead of circular motions, this is a linear movement. The movement doesn't matter though, the idea is just to get each frame of the animation out of view until it's time to be shown.
Originally I thought I could use steps(2) here, to show/hide an element, and indeed you can if you just have one. But that doesn't work with the overlapping as we run through the sequence, because the visible frames are still present by the time we wrap around back to the start of the sequence.
So instead I moved them even further away, and set steps(80), the same as the total number of frames in the animation. That ensures every frame is out of view until it's time to be displayed.
Then each element has a different offset, so they each start their animations at different points in the cycle. With 8000ms total, and 80 frames, that's increments of 100ms for the offsets each.
The offsets are negative, which causes the animation to be playing already (regardless of whether it's visible or not), rather than to have a delayed start.
I wrote a C program to generate the HTML and CSS, and to run Conway's Game of Life.
The shape we see moving across is called a middleweight spaceship; I picked it because it looks a bit like like 
⠀⡂⠁⢢⠀
⠀⠈⠉⠉⠀
Code for my rendering to UTF-8 braille characters is here if you want it.
I think that's it, frame by frame animation in inlined CSS. The rest is just positioning and such.
I'm sure there's a way to tighten it up, and I hope there's a way to fix things for Firefox.
What do you think? Ideas for improvements very welcome!
Thanks for reading ✨
