When I saw this little gif on Richard Keeling’s website I knew I needed to recreate it in CSS, with a couple of minor changes.

Of course, the first thing I changed was “gif” to “code” because we don’t make gifs here! The next thing I changed was the extrusion state; the text in Richard’s gif starts out extruded (3D) and flattens as each word animates. I did the opposite because I think it gives a smoother look for CSS animation.

Finally, I slowed the animation down a bit. I did a little Sass loop to help with the nth-child animation delays (and I won’t tell you how ridiculously long it took me to figure out the animation cycle) and it was a lot easier than I thought. I guess I just needed a use-case.

So far, I haven’t been able to figure out how to get an actual engraved effect that has any sort of cross-browser support, but I actually like it better without. I’ve tried a couple of different things but they either didn’t work visually or they didn’t work support-wise. I’ll keep cracking on it though.

I like this effect (and color scheme) so much I think I’ll use it on some other project in the future. Some retro project.

See the Pen Eat, Sleep, Code, Repeat by Smokie Lee (@xtoq) on CodePen.

See more of Richard’s work at his website and follow him on Twitter: @King_Rah.