Seldomly used now, perhaps. Is the author unfamiliar with the history of the technique? This was everywhere on the web. It’s how Facebook served almost every icon and UI asset.

Back in the day we used 'background-position' to slice up the sprite map. There are articles on A List Apart describing this that are over 20 years old now. It was also the underpinning of the site’s legendary “sliding windows” technique, which was dominant on the web for some time.

E: I should add that one reason for its popularity was that we didn’t have HTTP multiplexing yet and so you wanted a small count of images/resources on the page

However, this time, I was really hoping the example implementations would use CSS transforms instead of properties that require repaints, especially since the rationale given here for using sprites is performance.

Maybe layer compositing warrants its own article and is beyond the scope here, but you can really tell when whoever built a frontend knows their stuff because all animations are hitting a consistent 60fps.

First, the most important signal that any animation provides is this: the computer is doing this for you. This goes in the negative too: if you click and drag a file icon, the drag sprite may be translucent or highlighted somehow, but it should not 'animate' to your mouse cursor. The file icon should be attached to the cursor location with no delay.

However, suppose you drop it somewhere it can't go. The interface should then animate the file back to where it belongs; that's the computer 'putting it back'. Now, the timing function; how should the file go back? Slowly back away from the cursor? Accelerate to the return location, then slow back down again? No, it should very quickly snap away from the cursor, then settle where it belongs. You'll notice things like this as part of fit and finish; they are communication.

The man coming from the left eased in and then slowly stopped. This is profoundly wrong, like a person sneaking out of a dark place, then slowly coming to rest in front of you staring into your eyes, it is very much threat behavior. You want the person to come in a friendly way, so he can sell you something or convince you to smash the subscribe button. The correct animation is to simply appear halfway in, far enough you can see his smile; stop for 0.5s, indicating he is occupying the space; then slowly ease-in-ease-out the rest of the way.

Then the speech bubble should fade in, indicating that the computer is talking, and you as the user must act, like when a dialog says "Save your work now. I take your laptop away in 30 seconds. Look in my eyes, I am the user now."

I don't think the example of the trophy in the article is a good use case this days, you could draw that trophy as a SVG and animate the flames with GSAP or something, or draw each flame frame as a <symbol> and animate that with CSS.

[1] https://gifcities.org/search?q=torch

Part I found a bit difficult was using background images, rather than using <img src""> links, and performing x and y shifting to minimize the use of enormous aspect ratio image files (really long strip of image sideways).

Finally settled on something that looks like:

  .fire_torch2.trch_sprt {
    position: absolute;
    width: 24px;
    height: 53px;
    bottom: 0px;
    left: 0px;
    background-image: url('../items/fire_torch2_sprite.png');
    background-position: 0px 0px;
    background-size: 120px 265px; /* 5 columns * 24px, 5 rows * 53px */
    animation:
      fireTorch2SpriteX 0.55s steps(5) infinite, /* 1 second to complete one row */
      fireTorch2SpriteY 2.75s steps(5) infinite;
    display: none;
  }

  @keyframes fireTorch2SpriteX {
    from { background-position-x: 0; }
    to { background-position-x: -120px; } /* 5 columns * 24px */
  }

  @keyframes fireTorch2SpriteY {
    from { background-position-y: 0; }
    to { background-position-y: -265px; } /* 5 rows * 53px */
  }

  .fire_torch:has( .Lntrn_fire_swtch:checked ) .trch_drk { display: none; }
  .fire_torch:has( .Lntrn_fire_swtch:checked ) .trch_sprt { display: inline-block; }

Further, since the sprite sheet is actually 120px x 265px to handle 5 rows of 5 frames, it then requires a somewhat complicated @keyframe definition setup. It actually needs one x-loop that's short, and loops endlessly, going through the full 5 frames, and a second 5x step length y-loop that then iterates once every full x-loop.

Actually imagery and animations that can be played with can be found here: https://araesmojo-eng.github.io under "Lantern Tests Menu"

NOTE: Needs the lantern to function and light the torches. Requires other minor puzzles on the website.