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.
Top comments (24)
Release buddies lol, literally one minute apart!
Not even read yours yet, but I know it will deserve a โค๐ฆ and ๐ so I gave them to you already!
Glad to see your post, seems like ages since the last one!
And don't forget that
ย
ย
ย
ย
Edit after reading
Ok so the abstract ones being like Rorschach tests is cool, I see a screw thread, a spaceship, a sweet in a wrapper, a bat, a butterfly and a splat!
Am I OK Doc?
Will I live? ๐ฑ
Hmmm ๐ง. It seems when you were child, there is someone who always steal your lunch and you was afraid of him. You had a cat called Storm and you hate beans. You were a... Oh, this session is over, you will continue next time. 100$ please!
Pfff, that wasn't worth it, I am off to consult Doctor Google and Web MD, that always seems to work well.
10 minutes later...it appears I have Cancer.
.
.
.
.
.
.
.
(p.s. the joke is that Web MD always says you have Cancer, it is a bit of a meme, I am not making light of Cancer itself!)
it either tell you have a cancer or you have to drink cold water while putting your finger inside your ear and count until 10 ... In all the cases, never ever go to a doctor!
Then, who is the
of your world ?
Amazing as always. I may actually use one of these for a future project. ๐ค๐
I would be happy to see you making this i.giphy.com/media/3o6Zt3c5K3nBhU2L....
By the way - This is also a large collection ! Thank you for making this stuff !
why not. maybe in one of my next post ;)
YAY !
You should do tutorials for these animations! I know you've written about background-image and keyframe-less animations, but it would be cool to see how you go about building these. Very cool as usual!
I am planning to have such kind of posts in the near futur ;)
@afif Thanks for sharing with us, I use at least two different for my projects and clients like them..
glad to hear this ๐
That`s amazing, I really enjoyed the different animations you are able to do with pure CSS
This reminds me of a saying that goes: With great power comes great responsibility.
You are awesome!
really beautifull
I really like your codepen work, just followed you on codepen and your creativity is amazing! Keep it up ;-)
Just registered to this platform and I see this post it's pretty mind blown for a newbie like me. Didn't regret join this platform
Some comments have been hidden by the post's author - find out more