Joshua Comeau crowd-coined the term “boop” (high five, Adam Kuhn). These are sorta like hover/focus states, except that they aren’t. Your thingies — things like links, buttons, etc. — should still have those states. A “boop” is a more whimsical effect that runs once when the mouse enters it, finishes the run even if your mouse leaves (which is something CSS can’t really do), and will potentially run again on the user’s next
mouseenter later, after the first booping is done.
I’ve left some comments in the Pen above that were from alternative methods we explored along the way.