Adding 100 underline/overlay animations | The impressive CSS collection ⭐️
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
A special thanks to @adriantwarog who made a video about my first collection.