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
• The Strange
• The Abstract

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.

In case you missed the last CSS loaders collection

Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆

Temani Afif ・ Jun 29 '21

#css #webdev #beginners #showdev

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