Keyframe Animations

In the near two decades I’ve owned this domain, I’ve changed the design four times. This latest design initially employed a number of hover animations on the homepage; the same animations you see below. If you are not using a touchscreen device, position your cursor over a box and watch the resulting Oscar nominations for silliest trick.

The animations are easily made with the CSS keyframes at-rule, hence the title of this post, but that is simply my want of a more accurate label to use.

Each animation employs two images. One is a long background strip depicting a unique environment. The other is a small image positioned on top. The background strips are made to scroll, thereby giving the impression the static (top) images move along through their respective environments. It is an ancient trick that still works good. The scrolling speed is adjusted, respectively, to enhance the effect. The speed is a bit off in these examples. The butterfly moves too slow, while the others move too fast. If backgrounds could be scrolled more sinuously, that would enhance the effect, too. The butterfly would bounce around as they tend to fly, and the boat would pitch and roll on the waves, expectedly.

The animations are nifty in the way an old-fashioned zoetrope is. But they don’t work as intended on touchscreen devices, and they are needless page weight, in any case. So I removed them from official duty and share them here for design posterity only, nothing more.