Repeats the CSS selector (class names) twice - it's a problem if translate animation is used

[ADTC]

This is what happens if translateY or translateX etc are used.

Becomes unreadable if they overlap:

I think only the blue box (translated position) should have the name. The gray box shouldn't, since it's the original position. Or the gray box should only show the label if the blue one translated far enough to avoid overlap.

Or use some CSS or DOM hackery to make the label have an opaque background somehow without affecting the box transparency so that you can still keep both labels, but avoid the overlap problem, while still keeping the boxes transparent.