Adding 100 underline/overlay animations | The impressive CSS collection ⭐️

Temani Afif - Aug 10 '21 - - Dev Community

After the CSS loaders, it's time for this collection to reach 500 animations as well. Yes, 500 CSS underline/overlay animations!

I wanted to reach that milestone without using pseudo elements but it was a bit tough 😅 so for this one I will introduce pseudo elements.

As usual: No SVG, No JS, No keyframes, only one HTML element and CSS transitions.

Let's go!


Table of content


The Cloned

The Irregular III

The Colorful II

The All Sides IV

The Unexpected IV

The Fancy V

The Broken III

The Stroke

The Transformed II

The Multicolor III

The Inverted V

The Multi-Steps II

all the below will not work on Firefox due to the lack of support of @property

The Strange

#1,#2,#3 and #4 will not work on Firefox

The Abstract

Tell me what do you see and I will tell you who you are


That's it!

If I count the CSS loaders, you have now more than 1000 single div animations.

one thousand

In case you missed the last CSS loaders collection


A special thanks to @adriantwarog who made a video about my first collection.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .