Encoding Animated GIFs Into Pure CSS

by Matthew Rayfield on December 19th 2019

100% CSS Video Encoding

In what I believe to be a breakthrough in web styling, the Spongebob animation you see below this paragraph is 100% CSS. Yes that's right, this video clip has been encoded into a smooth 19 frame CSS animation. No images ! No cheater DataURLs embedded into the code ! Instead each frame is made from 200 horizontally-positioned vertical linear-gradients. Each with 144 color stops.

I would invite you to admire it's beauty up close in your browser's inspector. But weighing in at roughly 3 megabytes, it's significantly beefier than the puny 762 kilobytes of the source GIF. And frankly, I'm not sure your dev tools can handle it. Instead maybe you'd like to have a look at it here: gif2css-spongebob.css.

Encode Your Own

Matthew Rayfied World Research Lab is proud to announce: gif2css. An open source tool to encode any animated GIF or still image into 100% pure USDA certified CSS code.

It's true ! As of right now you too can harness this newly discovered, cross browser, platform independant, non-proprietary, human readable, transparency supporting, video codec for your own web development needs.

Tool: gif2css

Code: gif2css on GitHub

Making Of

With several of my projects over the past year I've come to see any visual element that I can rapidly change as having the potential to become a "display". It could be made from an emoji filled URL bar, a gaggle of popup windows, or even inspected HTML elements. With this idea recently top-of-mind it occured to me that a grid of DIVs on a page could be animated to show whatever I wanted.

At first I wasn't even sure if it could run at a decent enough frame rate. It's a lot of styling after all... So I coded it up to see. And it worked ! Surprisingly well ! But it wasn't clean enough. Too much HTML. No, instead I now wanted an animation contained in a single CSS file that could be included on a blank page. No markup ! (except the link to the css... no getting around that)

So looking for ways to pump out colors in two dimensions using CSS alone I came across radial-gradients. I figured I could just use one gradient per-pixel, positioned accordingly. So I tried that and the results were... bad. Huge files. Slooooooow animations. Weird holes in the image. Bad all around.

At this point I thought I was defeated. Until I had a "no duh" moment and realized all I needed were linear-gradients positioned in columns ! (i guess they might as well have been rows... but we'll never know). I coded that up, and low-and-behold we had a winner ! Some tweaks and interface making later gif2css was born and we all lived happily ever after.

Conclusion

CSS is wicked fast these days. The idea that you can take megabytes upon megabytes of text and your browser will near-instantaniously parse it out and display it as a full speed video clip is remarkable. When testing I had created a few 20+ megabyte beasts that would still run just fine.

Now is this something we would ever want or need to do ? I mean... No ? I can't really think of any reason you'd want to do this. Mayyyybe I can imagine a scenario where you needed to style an image or background into something with a single CSS file and it had to work without external requests ? But even then you'd probably just use a DataURL...

But regardless of usefulness, I hope you enjoyed this little adventure in CSS abuse ! Byeeee for now !

If you have questions, comments, or simply want to keep up with my latest tinkerings, check me out on Twitter: @MatthewRayfield. Or subscribe to my almost-never-bothered email list here.