180+ CSS @keyframes Examples

Animated <sup> & <sub>

A creative demonstration of a micro-interaction where semantic tags are used to create a fun, animated action indicator within the text. Technically, this is a clean CSS solution for generating a complex, repeating animation on individual characters without using JavaScript.

See the Pen Animated <sup> & <sub>.

Knight Rider HR

Explore how a semantically simple element <hr> is completely repurposed into a complex animated component without using JavaScript. Detailed @keyframes allow control over every “pixel” of the scanner animation, successfully creating a retro-futuristic gadget effect.