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.